56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
|
/**
|
||
|
|
* Sample React Native App
|
||
|
|
* https://github.com/facebook/react-native
|
||
|
|
* @flow
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import {
|
||
|
|
AppRegistry,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
View,
|
||
|
|
TouchableOpacity
|
||
|
|
} from 'react-native';
|
||
|
|
|
||
|
|
class example extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
greeting: undefined
|
||
|
|
};
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
if (this.state.greeting) return this.renderAfterButton();
|
||
|
|
return (
|
||
|
|
<View testID='welcome' style={{flex: 1, paddingTop: 20, justifyContent: 'center', alignItems: 'center'}}>
|
||
|
|
<Text style={{fontSize: 25, marginBottom: 30}}>
|
||
|
|
Welcome
|
||
|
|
</Text>
|
||
|
|
<TouchableOpacity testID='hello_button' onPress={this.onButtonPress.bind(this, 'Hello')}>
|
||
|
|
<Text style={{color: 'blue', marginBottom: 20}}>Say Hello</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity testID='world_button' onPress={this.onButtonPress.bind(this, 'World')}>
|
||
|
|
<Text style={{color: 'blue', marginBottom: 20}}>Say World</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
renderAfterButton() {
|
||
|
|
return (
|
||
|
|
<View style={{flex: 1, paddingTop: 20, justifyContent: 'center', alignItems: 'center'}}>
|
||
|
|
<Text style={{fontSize: 25}}>
|
||
|
|
{this.state.greeting}!!!
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
onButtonPress(greeting) {
|
||
|
|
this.setState({
|
||
|
|
greeting: greeting
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
AppRegistry.registerComponent('example', () => example);
|