如何在 React Native 中创建自定义 CheckBox 组件？

React Native 是关于组件的。它提供了很多内置组件供我们使用。通过使用这个组件，我们可以为移动应用程序创建一个漂亮的 UI。但它缺少一些组件。 CheckBox 就是其中之一。 React Native 没有提供任何我们可以用作复选框的内置组件。复选框是一个图形小部件，允许用户进行多项选择。用户可以一次从给定选项中选择多个复选框。因为我们在 React Native 中没有任何复选框组件，所以我们将自己创建一个自定义 CheckBox 组件。 React-Native-elements 等第三方库也提供了复选框组件，但通过创建我们自己的组件，我们可以更好地控制其功能和自定义。

创建应用程序：

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

npm install -g expo-cli

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

expo init "Your_Project_Name"

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

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

cd "Your_Project_Name"

第 5 步：创建一个名为 CheckBox.js 的新文件。该文件是一个自定义组件，我们将使用它来显示复选框。

touch CheckBox.js

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

CheckBox.js 文件

方法：我们将在 React Native 中创建一个名为 CheckBox 的自定义组件。我们将在CheckBox.js文件中编写此代码。然后我们在每个我们想使用复选框的地方使用这个组件。

在本例中，我们将创建一个自定义 CheckBox 组件。我们稍后将在主 App.js 文件中使用该组件。

第 1 步：打开我们之前创建的CheckBox.js文件。在该文件中写入以下代码。

在这个文件中，我们将返回一个包含 2 个组件的视图。它有一个用于复选框的图标和一个用于该复选框的文本。这个自定义 CheckBox 需要 3 个道具。

1. 标题：复选框的文本。
2. isChecked：布尔值，显示复选框是否被选中。复选框的图标将根据 isChecked 属性更改。
3. onPress：当用户按下该复选框时将调用的函数。

CheckBox.js

import { Pressable, StyleSheet, Text, View } from "react-native";
import React from "react";
import { MaterialCommunityIcons } from "@expo/vector-icons";
  
const CheckBox = (props) => {
    const iconName = props.isChecked ?
        "checkbox-marked" : "checkbox-blank-outline";
  
    return (
        
            
                
            
            {props.title}
        
    );
};
  
export default CheckBox;
  
const styles = StyleSheet.create({
    container: {
        justifyContent: "flex-start",
        alignItems: "center",
        flexDirection: "row",
        width: 150,
        marginTop: 5,
        marginHorizontal: 5,
    },
    title: {
        fontSize: 16,
        color: "#000",
        marginLeft: 5,
        fontWeight: "600",
    },
});

第 2 步：打开App.js文件并在该文件中写入以下代码。

App.js是运行应用程序时首先呈现的主文件。在这个文件中，我们将使用我们的自定义 CheckBox 组件。我们将为 3 个复选框创建 3 个状态。最初，它将具有一个布尔值 false。我们将此状态分配给 CheckBox 的 isChecked 属性。我们还将为每个复选框提供一个标题，以及一个选中/取消选中特定复选框的函数。

应用程序.js

import { StyleSheet, View } from "react-native";
import { useState } from "react";
import CheckBox from "./CheckBox";
  
export default function App() {
    const [music, setMusic] = useState(false);
      const [dancing, setDancing] = useState(false);
      const [reading, setReading] = useState(false);
  
    return (
        
             setMusic(!music)}
                title="Music"
                isChecked={music}
              />
               setDancing(!dancing)}
                title="Dancing"
                isChecked={dancing}
              />
               setReading(!reading)}
                title="Reading"
                isChecked={reading}
              />
        
      );
    }
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        justifyContent: "center",
        alignItems: "center",
      },
});

输出：

自定义复选框组件

这是在 React Native 中创建自定义 CheckBox 组件的方法。您可以根据需要多次重复使用它。您可以根据您的要求对其进行自定义。