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

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

const React = require('react')

const ReactNative = require('react-native')

const {

StyleSheet, Text, View, ToastAndroid, TouchableWithoutFeedback,

} = ReactNative

export default class ToastExample extends React.Component {

static title = 'Toast Example'

static description =

'Example that demonstrates the use of an Android Toast to provide TouchableWithoutFeedback.'

state = {}

render() {

return(

<View>

<View>

<Text>Simple toast</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.show(

'This is a toast with short duration',

ToastAndroid.SHORT,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Toast with long duration</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.show(

'This is a toast woth long duration',

ToastAndroid.LONG,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Toast with top gravity</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.showWithGravity(

'This is a toast with top gravity',

ToastAndroid.SHORT,

ToastAndroid.TOP,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Toast with center gravity</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.showWithGravity(

'This is a toast with center gravity',

ToastAndroid.SHORT,

ToastAndroid.CENTER,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Toast with bottom gravity</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.showWithGravity(

'This is a toast with bottom gravity',

ToastAndroid.SHORT,

ToastAndroid.BOTTOM,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Toast with x offset</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.showWithGravityAndOffset(

'This is a toast with x offset',

ToastAndroid.SHORT,

ToastAndroid.CENTER,

150,

0,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Toast with y offset</Text>

<TouchableWithoutFeedback

onPress={() =>

ToastAndroid.showWithGravityAndOffset(

'This is a toast with y offset',

ToastAndroid.SHORT,

ToastAndroid.BOTTOM,

0,

150,

)

}

>

<Text style={styles.text}>Click me.</Text>

</TouchableWithoutFeedback>

</View>

</View>

)

}

}

var styles = StyleSheet.create({

text: {

color: 'black',

},

})

module.exports = ToastExample