数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 React Native 中显示复选框？
复选框是我们在 UI 上经常使用的常见组件。我们在 React Native 中有一些很酷的方法来显示复选框。
核心 React Native 包不提供复选框支持，您需要安装一个包才能使用它。
需要安装以下包来显示复选框：
npm install --save-dev react-native-paper
基本的复选框组件如下所示：
<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />现在让我们看看复选框上的一些重要属性：
| 属性 | 描述 |
|---|---|
| status | 可以赋予 status 的值为 checked、unchecked 和 indeterminate。 |
| disabled | 值为布尔值。可用于启用/禁用复选框。 |
| onPress | 当复选框被选中时将调用的函数。 |
| color | 要赋予复选框的颜色 |
| 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;输出
更新于: 2021-07-01
3K+ 浏览量
广告