react-native(리액트 네이티브) component - CheckBox

react-native(리액트 네이티브) component - CheckBox

import React, {Component} from 'react';

import {StyleSheet, Text, View, CheckBox} from 'react-native';

export default class App extends Component {

// state = {

// eventCheckBoxIsOn: false,

// eventCheckBoxRegressionIsOn: true,

// }

constructor(props) {

super(props)

this.state = {

disabled: true,

trueCheckBoxIsOn: true,

fasleCheckBoxIsOn: false,

eventCheckBoxIsOn: false,

eventCheckBoxRegressionIsOn: true,

}

}

render() {

return (

<View style={styles.container}>

<Text>BasicCheckBoxExample</Text>

<CheckBox

onValueChange={value => this.setState({falseCheckBoxIsOn: value})}

style={{marginBottm: 10}}

value={this.state.falseCheckBoxIsOn}

/>

<CheckBox

onValueChange={value => this.setState({trueCheckBoxIsOn: value})}

value={this.state.trueCheckBoxIsOn}

/>

<Text>DisabledCheckBoxExample</Text>

<CheckBox disabled style={{marginBottm: 10}} value />

<CheckBox disabled value={false} />

<Text>EventCheckBoxExample</Text>

<View>

<CheckBox

onValueChange={value => this.setState({eventCheckBoxIsOn: value})}

style={{marginBottm: 10}}

value={this.state.eventCheckBoxIsOn}

/>

<CheckBox

onValueChange={value => this.setState({eventCheckBoxIsOn: value})}

style={{marginBottm: 10}}

value={this.state.eventCheckBoxIsOn}

/>

<Text>{this.state.eventCheckBoxIsOn ? 'On' : 'Off'}</Text>

</View>

<View>

<Text>eventCheckBoxRegressionExample, {"\n"}

최초 1회만 체크박스 작동, 상태변경은 안 됨.</Text>

<CheckBox

onValueChange={value => this.setState({eventCheckRegressionBoxIsOn: value})}

style={{marginBottm: 10}}

value={this.state.eventCheckBoxRegressionIsOn}

/>

<CheckBox

onValueChange={value => this.setState({eventCheckRegressionBoxIsOn: value})}

style={{marginBottm: 10}}

value={this.state.eventCheckBoxRegressionIsOn}

/>

<Text>{this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}</Text>

</View>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

});