react-native(리액트 네이티브) API - TimePickerAndroid

react-native(리액트 네이티브) API - TimePickerAndroid

const React = require('react')

const ReactNative = require('react-native')

const {

TimePickerAndroid,

StyleSheet,

Text,

View,

TouchableWithoutFeedback,

} = ReactNative

export default class TimePickerAndroidExample extends React.Component {

static title = 'TilePickerAndroid'

static description = 'Standard Android time picker dialog'

state = {

isoFormatText: 'pick a time (24-hour format)',

presetHour: 4,

presetMinute: 4,

presetText: 'pick a time, default: 4:04AM',

simpleText: 'pick a time',

clockText: 'pick a time',

spinnerText: 'pick a time',

defaultText: 'pick a time',

}

showPicker = async (stateKey, options) => {

try {

const { action, minute, hour } = await TimePickerAndroid.open(options)

const newState = {}

if (action === TimePickerAndroid.timeSetAction) {

newState[`${stateKey}Text`] = _formatTime(hour, minute)

newState[`${stateKey}Hour`] = hour

newState[`${stateKey}Minute`] = minute

} else if (action === TimePickerAndroid.dismissedAction) {

newState[`${stateKey}Text`] = 'dismissed'

}

this.setState(newState)

} catch ({code, message}) {

console.warn(`Error in example '${stateKey}': `, message)

}

}

render() {

return(

<View>

<View>

<Text>Simple time picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'simple', {})}

>

<Text style={styles.text}>{this.state.simpleText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Simple clock time picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'clock', {mode: 'clock'})}

>

<Text style={styles.text}>{this.state.clockText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Simple spinner time picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'spinner', {mode: 'spinner'})}

>

<Text style={styles.text}>{this.state.spinnerText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Simple default time picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'default', {mode: 'default'})}

>

<Text style={styles.text}>{this.state.defaultText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Time picker with pre-set time</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'preset', {

hour: this.state.presetHour,

minute: this.state.presetMinute,

})}

>

<Text style={styles.text}>{this.state.presetText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Time picker with 24-hour time format</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'isoFormat', {

hour: this.state.isoFormatHour,

minute: this.state.isoFormatMinute,

is24Hour: true,

})}

>

<Text style={styles.text}>{this.state.isoFormatText}</Text>

</TouchableWithoutFeedback>

</View>

</View>

)

}

}

function _formatTime(hour, minute) {

return `${hour}:${minute < 10 ? '0${minute}' : minute}`

}

var styles = StyleSheet.create({

text: {

color: 'black',

},

})

module.exports = TimePickerAndroidExample