react-native复选框示例？

Question

获取反应原生CheckBox工作/渲染的任何简单示例？也就是说，现在似乎是反应原生的一部分，这里提到的复选框：http://facebook.github.io/react-native/docs/checkbox.html

Answer 1

眼下CheckBox组件只支持Android系统。正如here所述，对于iOS，您应该使用Switch。

对于Android，使用非常简单。

<View style={{ flexDirection: 'column'}}> 
    <CheckBox /> 
    <View style={{ flexDirection: 'row' }}> 
    <CheckBox 
     value={this.state.checked} 
     onValueChange={() => this.setState({ checked: !this.state.checked })} 
    /> 
    <Text style={{marginTop: 5}}> this is checkbox</Text> 
    </View> 
</View> 

视图和文本组件是可选的，只是为了显示CheckBox如何与这些组件一起使用。 上面的代码将在Android设备上生成此屏幕。

这在iOS设备上

Answer 2

使用react-native-elements，任务更容易和例子可供选择：

import { CheckBox } from 'react-native-elements' 

<CheckBox 
    title='Click Here' 
    checked={this.state.checked} 
/> 

<CheckBox 
    center 
    title='Click Here' 
    checked={this.state.checked} 
/> 

<CheckBox 
    center 
    title='Click Here' 
    checkedIcon='dot-circle-o' 
    uncheckedIcon='circle-o' 
    checked={this.state.checked} 
/> 

<CheckBox 
    center 
    title='Click Here to Remove This Item' 
    iconRight 
    iconType='material' 
    checkedIcon='clear' 
    uncheckedIcon='add' 
    checkedColor='red' 
    checked={this.state.checked} 
/>