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',
},
});
'프로그래밍(Programming) > 리액트 네이티브(React Native)' 카테고리의 다른 글
react-native(리액트 네이티브) component - FlatList (0) | 2019.01.06 |
---|---|
react-native(리액트 네이티브) component - CheckBox (0) | 2019.01.06 |
react-native(리액트 네이티브) component - ActivityIndicator (0) | 2019.01.06 |
react-native(리액트 네이티브) props 정의 및 전달 (0) | 2018.10.29 |
react-native 프로젝트 폴더명 변경 관련 에러 (0) | 2018.10.12 |