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

React Native 没有内置任何 FAB 组件。每当您想在所有内容的顶部显示按钮时，都会使用浮动操作按钮 (FAB)。如果您使用过 ScrollView 并且用户可以上下滚动，则此 FAB 按钮将始终保持在同一位置，并且不会随着滚动而移动。你可以把这个按钮做成圆形或方形。您可以将图标或文本放在中间。

有多个库可以为您提供预构建 FAB 按钮。但是您也可以自己创建一个以获得最大的灵活性，以便您以任何您想要的方式对其进行自定义。

方法：我们将创建一个名为 FAB 的自定义组件，我们可以在任何我们想在屏幕上显示 FAB 的地方重用它。这个自定义组件 FAB 将采用一些道具，以便我们可以以任何我们想要的方式对其进行自定义。

创建反应应用程序：

第 1 步：打开终端并运行以下命令。它将在您的系统中全局安装 Expo CLI。

npm install -g expo-cli

第 2 步：现在，通过运行以下命令创建一个新的 React Native 项目。

expo init "Your_Project_Name"

第 3 步：您将被要求选择一个模板。选择空白模板。

第 4 步：创建一个名为FAB.js的新文件，该文件是用于创建 FAB 按钮的自定义组件。

mkdir FAB.js

第 5 步：现在转到项目文件夹并运行以下命令来启动服务器。

cd "Your_Project_Name"
npm start

项目结构：它将如下所示：

FAB 组件

示例：打开FAB.js文件并在该文件中写入以下代码。

此文件包含自定义 FAB 组件的代码。它将需要 2 个道具、FAB 按钮的文本以及用户按下按钮时将调用的函数。该组件将在中心具有背景颜色和文本。您还可以根据需要添加图标。作为 prop 接收的函数将分配给 Pressable 组件的 onPress 事件。

Javascript

import { Pressable, StyleSheet, Text } from "react-native";
import React from "react";
  
const FAB = (props) => {
    return (
        
            {props.title}
        
    );
};
  
export default FAB;
  
const styles = StyleSheet.create({
    container: {
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 10,
        position: "absolute",
        bottom: 70,
        right: 40,
        backgroundColor: "#26653A",
        paddingHorizontal: 20,
        paddingVertical: 10,
    },
    title: {
        fontSize: 18,
        color: "#fff",
        fontWeight: "bold",
    },
});

• App.js：它是运行应用程序时首先呈现的主文件。在这个文件中，我们将使用我们刚刚创建的自定义 FAB 组件。我们将传递一个文本作为字符串和一个我们希望在用户每次按下按钮时调用的函数。在此示例中，我们创建了一个名为 displayAlert 的函数，它将调用带有消息的警报框。

Javascript

import { StyleSheet, View } from "react-native";
import FAB from "./FAB";
  
export default function App() {
    const displayAlert = () => {
        alert("Welcome to GeeksforGeeks");
    };
  
    return (
        
            
        
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
});

输出：

FAB 组件

这是您在 React Native 中自己创建自定义 FAB 按钮的方法，它将为您提供比第三方预构建组件更大的灵活性。