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

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

const React = require('react')

const ReactNative = require('react-native')

const StyleSheet = require('StyleSheet')

const {Picker, Text, View} = ReactNative

const Item = Picker.Item

export default class PickerExample extends React.Component {

state = {

selected1: 'key1',

selected2: 'key1',

selected3: 'key1',

color: 'red',

mode: Picker.MODE_DIALOG,

}

changeMode = () => {

const newMode =

this.state.mode ===Picker.MODE_DIALOG

? Picker.MODE_DROPDOWN

: Picker.MODE_DIALOG

this.setState({mode: newMode})

}

onValueChange = (key, value) => {

const newState = {}

newState[key] = value

this.setState(newState)

}

render() {

return(

<View>

<Text>Basic, dialog mode picker</Text>

<Picker

style={styles.picker}

selectedValue={this.state.selected1}

onValueChange={this.onValueChange.bind(this, 'selected1')}

>

<Item label="hello" value="key0" />

<Item label="world" value="key1" />

</Picker>

<Text>disabled picker</Text>

<Picker

style={styles.picker}

enabled={false}

selectedValue={this.state.selected1}

>

<Item label="hello" value="key0" />

<Item label="world" value="key1" />

</Picker>

<Text>dropdown mode picker</Text>

<Picker

style={styles.picker}

selectedValue={this.state.selected2}

onValueChange={this.onValueChange.bind(this, 'selected2')}

mode="dropdown"

>

<Item label="hello" value="key0" />

<Item label="world" value="key1" />

</Picker>

<Text>include prompt</Text>

<Picker

style={styles.picker}

selectedValue={this.state.selected3}

onValueChange={this.onValueChange.bind(this, 'selected3')}

prompt="Pick one, just one"

>

<Item label="hello" value="key0" />

<Item label="world" value="key1" />

</Picker>

<Text>Picker with no listesner, try below...</Text>

<Picker style={styles.picker}>

<Item label="hello_Picker with no listesner" value="key0" />

<Item label="world_Picker with no listesner" value="key1" />

</Picker>

<Text>colorful picker</Text>

<Picker

style={[styles.picker, {color: 'white', backgroundColor: 'brown'}]}

selectedValue={this.state.color}

onValueChange={this.onValueChange.bind(this, 'color')}

>

<Item label="red" color="red" value="red" />

<Item label="green" color="green" value="green" />

<Item label="blue" color="blue" value="blue" />

</Picker>

<Picker

style={styles.picker}

selectedValue={this.state.color}

onValueChange={this.onValueChange.bind(this, 'color')}

>

<Item label="red" color="red" value="red" />

<Item label="green" color="green" value="green" />

<Item label="blue" color="blue" value="blue" />

</Picker>

</View>

)

}

}

var styles = StyleSheet.create({

picker: {

width: 100,

},

})

module.exports = PickerExample