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

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

const React = require('react')

const ReactNative = require('react-native')

const {

Switch, Text, View,

} = ReactNative

export default class BasicSwitchExample extends React.Component {

state = {

trueSwitchIsOn: true,

falseSwitchIsOn: false,

colorTrueSwitchIsOn: true,

colorFalseSwitchIsOn: false,

eventSwitchIsOn: false,

eventSwitchRegressionIsOn: true,

}

render() {

return(

<View>

<Text>Switches can be set to true or flase</Text>

<Switch

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

style={{marginBottom: 10}}

value={this.state.falseSwitchIsOn}

/>

<Switch

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

value={this.state.trueSwitchIsOn}

/>

<Text>Switches can be disabled</Text>

<View>

<Switch disabled style={{marginBottom: 10}} value />

<Switch disabled value={false} />

</View>

<Text>Custom colors can be provided</Text>

<View>

<Switch

onValueChange={value =>

this.setState({colorFalseSwitchIsOn: value})

}

style={{marginBottom: 10}}

thumbColor="#0000ff"

trackColor={{

false: '#ff0000',

true: '#00ff00',

}}

value={this.state.colorFalseSwitchIsOn}

/>

<Switch

onValueChange={value =>

this.setState({colorTrueSwitchIsOn: value})

}

thumbColor="#0000ff"

trackColor={{

false: '#ff0000',

true: '#00ff00',

}}

value={this.state.colorFalseSwitchIsOn}

/>

</View>

<Text>Change events can be detected</Text>

<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>

<View>

<Switch

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

style={{marginBottom: 10}}

value={this.state.eventSwitchIsOn}

/>

<Switch

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

style={{marginBottom: 10}}

value={this.state.eventSwitchIsOn}

/>

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

</View>

<View>

<Switch

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

style={{marginBottom: 10}}

value={this.state.eventSwitchRegressionIsOn}

/>

<Switch

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

style={{marginBottom: 10}}

value={this.state.eventSwitchRegressionIsOn}

/>

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

</View>

</View>

</View>

)

}

}