推荐开源项目:react-native-checkbox —— 简易React Native复选框组件
import React from 'react';
import { Text, View } from 'react-native';
import CheckBox from '@react-native-community/checkbox';
export default class MyCheckboxes extends React.Component {
state = {
checked1: false,
checked2: true,
};
render() {
const { checked1, checked2 } = this.state;
return (
<View>
<CheckBox
value={checked1}
onValueChange={newValue => this.setState({ checked1: newValue })}
/>
<Text>Option 1 is {checked1 ? 'checked' : 'unchecked'}</Text>
<CheckBox
value={checked2}
onValueChange={newValue => this.setState({ checked2: newValue })}
color="green" // 自定义颜色
/>
<Text>Option 2 is {checked2 ? 'checked' : 'unchecked'}</Text>
</View>
);
}
}
这段代码演示了如何在React Native应用中使用@react-native-community/checkbox
组件。它创建了两个复选框,每个复选框都可以被用户点击来改变其状态,并且在页面上显示其当前状态。此外,还演示了如何通过color
属性来自定义复选框的颜色。
评论已关闭