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

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

import React, {Component} from 'react';

import {StyleSheet, Text, View, Button, Alert} from 'react-native';

export default class App extends Component {

constructor(props) {

super(props)

this.state = {

disabled: true,

}

}

_onPressLearnMore = () => {

Alert.alert('this function is not defined')

}

_onButtonPress = (nameX) => {

Alert.alert(`${nameX} has been pressed`)

}

render() {

return (

<View style={styles.container}>

<Text style={styles.welcome}>Welcome to React Native!</Text>

<Button

onPress={this._onPressLearnMore}

title="Learn More"

color="#841584"

accessibilityLabel="Learn more about this purple button"

/*people who use VoiceOver know what element they have selected.

VoiceOver will read this string when a user selects

the associated element.*/

/>

<Button

onPress={() => this._onButtonPress('name1_button')}

title="name1"

color="green"

accessibilityLabel="testtest"

/>

<Button

disabled

onPress={() => this._onButtonPress('name2_button')}

title="name2"

color="#841584"

accessibilityLabel="testtest"

/>

<Button

disabled={true}

onPress={() => this._onButtonPress('name3_button')}

title="name3"

color="red"

accessibilityLabel="testtest"

/>

<Button

disabled={this.state.disabled}

onPress={() => this._onButtonPress('name4_button')}

title="name4"

color="red"

accessibilityLabel="testtest"

/>

<Button

disabled={false}

onPress={() => this._onButtonPress('name5_button')}

title="name5"

color="red"

accessibilityLabel="testtest"

/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

});