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

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

const React = require('react')

const ReactNative = require('react-native')

const {

Alert, StyleSheet, Text, TouchableHighlight, View,

} = ReactNative

const alertMessage =

'alertMessage Example test test test.' +

'alertMessage Example test test test22222.'

class SimpleAlertExampleBlock extends React.Component {

render() {

return(

<View>

<TouchableHighlight

style={styles.wrapper}

onPress={() => Alert.alert('Alert Title', alertMessage)}

>

<View style = {styles.button}>

<Text>Alert with message and default button</Text>

</View>

</TouchableHighlight>

<TouchableHighlight

style={styles.wrapper}

onPress={() => Alert.alert('Alert Title', alertMessage, [

{ text: 'OK', onPress:() => console.log('OK Pressed!')},

])}

>

<View style = {styles.button}>

<Text>Alert with one button</Text>

</View>

</TouchableHighlight>

<TouchableHighlight

style={styles.wrapper}

onPress={() => Alert.alert('Alert Title', alertMessage, [

{ text: 'Cancel', onPress:() => console.log('Cancel Pressed!')},

{ text: 'OK', onPress:() => console.log('OK Pressed!')},

])}

>

<View style = {styles.button}>

<Text>Alert with two buttons</Text>

</View>

</TouchableHighlight>

<TouchableHighlight

style={styles.wrapper}

onPress={() => Alert.alert('Alert Title', null, [

{ text: 'Foo', onPress:() => console.log('Foo Pressed!')},

{ text: 'Bar', onPress:() => console.log('Bar Pressed!')},

{ text: 'Baz', onPress:() => console.log('Baz Pressed!')},

])}

>

<View style = {styles.button}>

<Text>Alert with three buttons</Text>

</View>

</TouchableHighlight>

<TouchableHighlight

style={styles.wrapper}

onPress={() =>

Alert.alert(

'Foo Title',

alertMessage,

'..............'.split('').map((dot,index) => ({

text: `Button ${index}`,

onPress: () => console.log(`Pressed ${index}`),

})),

)

}

>

<View style = {styles.button}>

<Text>Alert with two many buttons</Text>

</View>

</TouchableHighlight>

<TouchableHighlight

style={styles.wrapper}

onPress={() =>

Alert.alert(

'Alert Title',

null,

[{ text: 'OK', onPress:() => console.log('OK Pressed!')}],

{

cancelable: false,

},

)

}

>

<View style = {styles.button}>

<Text>Alert that cannot be dismissed</Text>

</View>

</TouchableHighlight>

<TouchableHighlight

style={styles.wrapper}

onPress={() =>

Alert.alert('', alertMessage, [

{ text: 'OK', onPress:() => console.log('OK Pressed!')},

])

}

>

<View style = {styles.button}>

<Text>Alert without title</Text>

</View>

</TouchableHighlight>

</View>

)

}

}

export default class AlertExample extends React.Component {

static title = 'Alert'

static description =

'Alerts text example....' +

'Alerts text example2222....'

render() {

return(

<View>

<SimpleAlertExampleBlock />

</View>

)

}

}

var styles = StyleSheet.create({

wrapper: {

borderRadius: 5,

marginBottom: 5,

},

button: {

backgroundColor: '#eeeeee',

padding: 10,

},

})