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);