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',
},
});


+ Recent posts