如果你不需要太多的自定义，你可以使用expo checkbox：

import Checkbox from 'expo-checkbox';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [isChecked, setChecked] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
      </View>
      <View style={styles.section}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
          color={isChecked ? '#4630EB' : undefined}
        />
        <Text style={styles.paragraph}>Custom colored checkbox</Text>
      </View>
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Disabled checkbox</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
    marginVertical: 32,
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paragraph: {
    fontSize: 15,
  },
  checkbox: {
    margin: 8,
  },
});

字符串
如果你想要一个有更多自定义的模式，如黑暗模式和图标，你可以从头开始创建一个这样的：

import React, { Component, useState, useEffect } from 'react';
import { StyleSheet, Text, Platform, View, Image, TouchableWithoutFeedback, Pressable } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; 

import * as Icons  from '../assets';
import { pastelBlue } from '../helpers/colors';
import Scheme from '../helpers/colors';

export default function CheckBox(props) {

    const [checked, setChecked] = useState(false);
    const currentTextColor = Scheme.getCurrentText();

    useEffect(()=>{
      setChecked(props.checked);
    })

    const handleCheckboxChange = event => {
      setChecked(!checked);
      props.handler(!checked);
    }

    const createIcons = ( ) => {
      let parent = [];
      if (!!props.icon) {
        parent.push(
          <Image
            source={Icons[`${props.icon}`]}
            style={[styles.icon, {
              tintColor: checked ? Scheme.getCurrentText():"gray",
            }]}
          />
        )
      } 
      return parent;
    }

    if (Platform.OS == "web") {
      return (
        <View style={[
          styles.webCheckBoxWrapper,
          {
            borderWidth: !props.isValid?1:0,
            borderColor: "red",
          }
        ]}>
          <MyCheckbox 
            checked={checked}
            value={checked}
            color={pastelBlue}
            onChange={handleCheckboxChange}/>
          
          <TouchableWithoutFeedback
            onPress={()=>{
              handleCheckboxChange()
            }}
          >
            <View style={styles.flexBox}>
              <Text 
                style={{
                  fontSize: 14,
                  marginLeft: 20,
                  color:checked ? currentTextColor:"gray",
                  fontWeight:checked ? "bold" :"normal",
                }}
                allowFontScaling={false}
                numberOfLines={1}
              >
              {props.label}
            </Text>
            {createIcons()}
            </View>
          </TouchableWithoutFeedback>
        </View>    
      ) 
    } else {
      return (
        <View style={[
          styles.checkBoxWrapper, 
          {
            borderWidth: !props.isValid?1:0,
            borderColor: "red",
          }
        ]}>
          <MyCheckbox 
            checked={checked}
            value={checked}
            color={pastelBlue}
            onChange={handleCheckboxChange}/>
          <TouchableWithoutFeedback
            onPress={()=>{
              handleCheckboxChange()
            }}
          >
            <View style={styles.flexBox}>
              <Text 
                style={{
                  fontSize: 14,
                  marginLeft: 20,
                  color:checked ? currentTextColor:"gray",
                  fontWeight:checked ? "bold" :"normal",
                }}
                allowFontScaling={false}
                numberOfLines={1}
              >
                {props.label}
              </Text>
              {createIcons()}
            </View>
          </TouchableWithoutFeedback>  
        </View>    
      ) 
    }
  }

  function MyCheckbox({
    checked,
    onChange,
    buttonStyle = {},
    activeButtonStyle = {},
    inactiveButtonStyle = {},
    activeIconProps = {},
    inactiveIconProps = {},
  }) {

    const iconProps = checked ? activeIconProps : inactiveIconProps;
    const textColor = Scheme.getCurrentText();

    if (textColor == "black") {
      return (
        <Pressable
          style={[
            buttonStyle,
            checked
              ? activeButtonStyle
              : inactiveButtonStyle,
          ]}
          onPress={() => onChange(!checked)}>
          { checked ?
            <View>
              <View style={{backgroundColor: textColor, position: "absolute", width: 15, height: 15, margin: 4}}/>
              <MaterialIcons {...iconProps} name="check-box" size={24} color={pastelBlue} />
            </View>:
            <MaterialIcons {...iconProps} name="check-box-outline-blank" size={24} color={"grey"} />
          }
        </Pressable>
      );
    } else {
      return (
        <Pressable
          style={[
            buttonStyle,
            checked
              ? activeButtonStyle
              : inactiveButtonStyle,
          ]}
          onPress={() => onChange(!checked)}>
          { checked ?
            <MaterialIcons {...iconProps} name="check-box" size={24} color={pastelBlue} />:
            <MaterialIcons {...iconProps} name="check-box-outline-blank" size={24} color={pastelBlue} />
          }
        </Pressable>
      );
    }
  }

const styles = StyleSheet.create({
  checkBoxWrapper: {
      flexDirection:"row",
      alignItems: "center",
      justifyContent: "center",
      height: 40,
      flex: 1,
      minWidth: 200,
  },
  webCheckBoxWrapper: {
    flexDirection:"row",
    alignItems: "center",
    justifyContent: "center",
    height: 35,
    flex: 1,
    minWidth: 200,
    margin: 3,
  },
  flexBox: {
    flexDirection:"row",
    alignItems: "center",
    justifyContent: "center",
  },
  checkBoxText: {
    fontSize: 10,
    marginLeft: 10,
  },
  icon: {
    marginLeft: 10,
    width: 30,
    height: 30,
    elevation: 0, 
    shadowOffset: { height: 0, width: 0 }, 
    shadowOpacity: 0, 
    shadowRadius: 0
  }
});

型
这是一个guide to creating your own checkbox component