react-native的复选框实现

react

1，效果图：

2，所需安装包：

npm install --save react-native-elements ;

3，引入：

import {TouchableOpacity } from ‘react-native’;

import { CheckBox } from ‘react-native-elements’;

4，使用元素：

由于使用第三方库react-native-elements会产生onpress事件无法触发的神奇现象，所以决定仅使用这个第三方库提供的左边图标，右边的文字则使用text，而他们俩的父元素则使用TouchableOpacity按钮。

5，实现思想：

点击按钮TouchableOpacity触发事件，将状态checked进行取反(true / false) ，checkbox的check状态取值为这个checked 值；

6，代码：

constructor (props){
super(props);
this.state={
checked: true,
}
}

onPress={( )=>this.setState({checked: !this.state.checked}) }>
自动登录