expo-checkbox
expo-checkbox
开放Beta测试文档 作为预发布开放Beta测试的一项内容,亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代,所描述的这些功能可能会发生变化。有关最新功能的信息,请参阅发布说明。
@amazon-devices/expo-checkbox库为Android、iOS、网页和Vega提供了基本的boolean输入。如果您在寻找更灵活的组件,请参阅实现您自己的checkbox指南(仅提供英文版)。
安装
- 在
package.json文件中添加JavaScript库依赖项。"dependencies": { ... "@amazon-devices/expo-checkbox": "~2.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 |
该值显示复选框是否呈现为选中状态 |
支持的版本
| 程序包版本 | 基于 | @amazon-devices/react-native-kepler版本 |
|---|---|---|
| 2.0.x | 2.6.0 | 2.0.x |
其他资源
有关其他库的信息,请参阅支持的第三方库和服务。
Last updated: 2025年9月30日

