反応ネイティブのチェックボックスの例？

Question

反応ネイティブのCheckBoxを作業/レンダリングする簡単な例はありますか？それは、ここで述べたように、今反応し、ネイティブの一部であるように思われるのCheckBoxです：http://facebook.github.io/react-native/docs/checkbox.html

Answer 1

は今CheckBoxコンポーネントのみでサポートされていますアンドロイド。 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> 

ViewおよびTextコンポーネントは、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} 
/>