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