React-Native实现登录页面，并显示和清除用户的输入

/**
* Sample React Native App
* https://github.com/facebook/react-native * ES6实现代码
*/

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';

let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componentWidth = totalWidth * 0.8;
export default class Project1 extends Component {
constructor (props){
super(props);
this.state = {
inputedNum:'',
inputedPW:''
};
//下面两条语句将两个回调函数和成员方法绑定
this.updateNum = this.updateNum.bind(this);
this.updatePW = this.updatePW.bind(this);
this.buttonPressed = this.buttonPressed.bind(this);
}
updateNum(newText) {
this.setState((state) => {
return {
inputedNum:newText
};
});
}
updatePW(newText) {
this.setState((state) => {
return {
inputedPW:newText
};
});
}
buttonPressed(){
this.setState((state) => {
return {
inputedNum:''
};
});
}

render() {
return (
<View style={styles.container}>
<TextInput style={styles.numberInputStyle}
placeholder={'请输入手机号'}
onChangeText={(newText) => this.updateNum(newText)}/>
<Text style={styles.textPromptStyle}>
请输入您的手机号：{this.state.inputedNum}//代码联动显示用户的手机号输入
</Text>
<TextInput style={styles.passwordInputStyle}
placeholder={'请输入密码'}
password={true}
onChangeText={(newText) => this.updatePW(newText)}/>
<Text style={styles.bigTextPrompt}
onPress = {this.buttonPressed}>//代码联动删除用户的手机号输入
确 定
</Text>

</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
numberInputStyle: {
top: 20,
left: leftStartPoint,
width: componentWidth,
backgroundColor:'gray',
fontSize: 20,
},
textPromptStyle: {
top: 30,
left: leftStartPoint,
width: componentWidth,
fontSize: 20,
},
passwordInputStyle: {
top: 50,
left: leftStartPoint,
width: componentWidth,
backgroundColor:'gray',
fontSize: 20,
},
bigTextPrompt: {
top: 70,
left: leftStartPoint,
width: componentWidth,
backgroundColor:'gray',
color:'white',
textAlign:'center',
fontSize: 60,
},
});

AppRegistry.registerComponent('Project1', () => Project1);