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} 
/>