expo-checkbox

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

@amazon-devices/expo-checkbox库为Android、iOS、网页和Vega提供了基本的boolean输入。如果您在寻找更灵活的组件，请参阅实现您自己的checkbox指南（仅提供英文版）。

安装

在package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。
- React Native 0.72
- React Native 0.83
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/expo-checkbox": "~2.0.0" }
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/expo-checkbox": "~3.0.0" }
使用npm install命令重新安装依赖项。

示例

以下示例演示了Checkbox的基本用法。

已复制到剪贴板。

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

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

  return (
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
        />
        <Text style={styles.label}>Checkbox</Text>
      </View>
      <Text>Is Selected: {isChecked ? 'true' : 'false'}</Text>
      <View style={styles.checkboxContainer}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
          color={isChecked ? '#E22E07' : undefined}
        />
        <Text style={styles.label}>Custom color</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <Checkbox
          style={styles.checkbox}
          disabled
          value={isChecked}
          onValueChange={setChecked}
        />
        <Text style={styles.label}>Disabled checkbox</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },
  checkboxContainer: {
    flexDirection: 'row',
    marginVertical: 10,
  },
  checkbox: {
    alignSelf: 'center',
  },
  label: {
    margin: 8,
  },
});

API参考

有关此库和API参考信息的更多详细信息，请查看Expo官方文档expo-checkbox页面（仅提供英文版）。

components

组件	描述
`Checkbox`	`boolean`输入元素

Checkbox属性

属性	描述
`color`	复选框的色调或颜色。此项会覆盖禁用的不透明样式。
`disabled`	如果禁用复选框，复选框将变得不透明且不可选中
`onChange`	客户选中复选框时调用的回调
`onValueChange`	客户选中复选框时调用的回调
`value`	该值显示复选框是否呈现为选中状态

支持的版本

NPM程序包版本	Vega SDK版本	Vega OS版本	React Native版本
2.0.1758683737	0.23及更早版本	`操作系统1.1 (1401010009820)`及更早版本	0.72
3.0.0	0.24	`操作系统1.2 (2101020054720)`	0.72、0.83

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2026年8月3日