如何在 reactnative 中显示复选框?
react nativejavascriptmobile development
复选框是我们经常在 UI 上使用的常见组件。我们确实有一些很酷的方法可以在 reactnative 中显示复选框。
核心 react-native 包不支持复选框，您需要安装一个包才能使用它。
必须安装以下包才能显示复选框 −
npm install --save-dev react-native-paper
基本的复选框组件如下 −
<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />
现在让我们看看复选框的一些重要属性 −
| 属性 | 说明 |
|---|---|
| status | 可赋予 status 的值有
checked、unchecked 和 indeterminate。 |
| disabled | 该值为布尔值。它可用于
启用/禁用复选框。 |
| onPress | 选中复选框时将调用的函数。 |
| color | 要赋予的颜色checkbox |
| uncheckColor | 复选框在未选中模式下的颜色。 |
这是一个简单的复选框显示 −
useState 用于设置复选框的选中、未选中状态，如下所示 −
const [checked, setChecked] = React.useState(false);
状态在 checked 变量中维护，并使用 setChecked 方法对其进行更新。
当用户选中/取消选中复选框时，选中状态将更新，如下所示 −
onPress={() => {
setChecked(!checked);
}}
完整代码如下 −
示例
import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';
const MyComponent = () => {
const [checked, setChecked] = React.useState(false);
return (
<SafeAreaView style={styles.container}>
<Checkbox
status={checked ? 'checked' : 'unchecked'}
onPress={() => {
setChecked(!checked);
}}
color={'green'}
uncheckColor={'red'}
/>
<Text>Checkbox</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
});
export default MyComponent;
输出
