Skip to content

Instantly share code, notes, and snippets.

@spd789562 spd789562/android.js
Created Aug 19, 2016

Embed
What would you like to do?
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Image,
TouchableOpacity
} from 'react-native';
class FirstApp extends Component {
constructor(props){
super(props);
this.state = {
bmi: "",
height: 0,
weight: 0
};
this.handleClick = this.handleClick.bind(this);
this.handleChangeH = this.handleChangeH.bind(this);
this.handleChangeW = this.handleChangeW.bind(this);
}
handleClick(){
const bmi = (this.state.weight / ((this.state.height/100) * (this.state.height/100)));
this.setState({bmi:bmi.toString()});
}
handleChangeH(height){
this.setState({height});
}
handleChangeW(weight){
this.setState({weight});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
</Text>
<Text>身高</Text><TextInput onChangeText={this.handleChangeH} autoFocus={true}/>
<Text>體重</Text><TextInput onChangeText={this.handleChangeW} autoFocus={true}/>
<TouchableOpacity onPress={this.handleClick}>
<Text>Submit</Text>
</TouchableOpacity>
<Text style={styles.instructions}>
Hello {this.state.bmi}
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('FirstApp', () => FirstApp);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.