如何在 React Native 中创建自定义 FAB（浮动操作按钮）？

浮动操作按钮（FAB）是一种常见的用户界面元素，它通常用于在移动应用程序中显示主要的操作按钮。在 React Native 中创建自定义的 FAB 可以通过以下几个步骤完成：

1. 安装 React Native

确保您已经在本地设置好 React Native 的开发环境。如果还未安装 React Native，请按照 React Native 官方文档进行安装。

2. 创建一个新的 React Native 项目

使用 React Native 的命令行工具（react-native-cli）创建一个新的 React Native 项目：

npx react-native init CustomFAB
cd CustomFAB

3. 安装依赖

使用以下命令安装 React Native Vector Icons 和 Animated API 两个重要的依赖库：

npm install react-native-vector-icons
npm install react-native-reanimated react-native-gesture-handler

4. 添加图标资源

将需要的图标资源添加到项目中。在 CustomFAB 项目的根目录下创建一个名为 assets 的文件夹，并将图标文件（比如 icon.png）放在其中。

5. 配置图标字体

编辑 android/app/build.gradle 文件，添加以下配置来设置图标字体：

project.ext.vectoricons = [
    iconFontNames: ['MaterialIcons.ttf']
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

6. 手动链接依赖库

编辑 android/app/build.gradle 文件，将以下代码添加到 dependencies 部分：

implementation project(':react-native-vector-icons')

然后，编辑 android/settings.gradle 文件，添加以下代码：

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

最后，在项目的根目录下执行以下命令链接依赖库：

npx react-native link react-native-vector-icons

7. 创建自定义 FAB 组件

在项目的根目录下，创建一个名为 CustomFAB.js 的文件，并添加以下代码：

import React, { useEffect, useRef } from 'react';
import { Animated, TouchableNativeFeedback, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const CustomFAB = () => {
  const buttonSize = useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(buttonSize, {
      toValue: 0.9,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(buttonSize, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };

  return (
    <TouchableNativeFeedback
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      background={TouchableNativeFeedback.Ripple('#999999')}
    >
      <Animated.View
        style={{
          transform: [{ scale: buttonSize }],
          width: 56,
          height: 56,
          borderRadius: 28,
          position: 'absolute',
          bottom: 16,
          right: 16,
          backgroundColor: '#007AFF',
          elevation: 4,
        }}
      >
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Icon name="add" size={24} color="#FFFFFF" />
        </View>
      </Animated.View>
    </TouchableNativeFeedback>
  );
};

export default CustomFAB;

在这个自定义 FAB 组件中，我们使用了 Animated API 来实现按钮的缩放动画效果。TouchableNativeFeedback 提供了触摸交互功能，并使用 react-native-vector-icons 库来渲染一个 "add" 图标。

8. 使用自定义 FAB 组件

在 App.js 文件中，使用自定义 FAB 组件：

import React from 'react';
import { StatusBar, View } from 'react-native';
import CustomFAB from './CustomFAB';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      {/* 其他界面内容 */}
      <CustomFAB />
    </View>
  );
};

export default App;

9. 运行应用程序

在项目的根目录下执行以下命令运行应用程序：

npx react-native run-android

在运行应用程序之前，请确保您已经启动了模拟器或者连接了真实设备。

通过以上步骤，您将能够在 React Native 应用程序中创建自定义的 FAB（浮动操作按钮）。该按钮具有缩放动画效果和可定制的样式，可用于实现各种功能。

希望这个教程对您有所帮助！有关更多信息，请查阅相关文档和资料。

参考文档：

• React Native 官方文档：https://reactnative.dev/
• React Native Vector Icons：https://github.com/oblador/react-native-vector-icons
• React Native Animated API：https://reactnative.dev/docs/animated