react-native 史上最搓的登陆注册

来源:互联网 发布:一本好书 知乎 编辑:程序博客网 时间:2024/05/21 17:38
import React,{Compontent} from 'react';import{  AppRegistry,StyleSheet,Text,View,Dimensions,TextInput}from 'react-native';let widthOfMargin = Dimensions.get("window").width*0.05;export default class HelloWorldTest extends React.Component{  constructor(props){      super(props);      this.state = {          inputNum:'',          inputPwd:''        };        this.updatePw=this.updatePw.bind(this);   }  updatePw(newText){    this.setState(()=>{        return{          inputPwd:newText,        };      }    );  }  updateNum(newText){     this.setState(()=>{         return{           inputNum:newText,          };      }    );  }  render(){    return(      <View style={styles.container}>        <TextInput                   placeholder={'请输入手机号'}           onChangeText={            (newText)=>this.updateNum(newText)          }         />        <Text style={styles.textPromptStyle}>          您输入的手机号:{this.state.inputNum}        </Text>        <TextInput style={styles.textInputStyle}          placeholder={'请输入密码'}          password={true}          onChangeText={this.updatePw}        />        <Text style={styles.bigTextPrompt}>          确定        </Text>      </View>    );  }}let styles= StyleSheet.create(  {    container:{      flex:1,      backgroundColor:'white'    },    textInputStyle:{      margin:widthOfMargin,      fontSize:20,      backgroundColor:'gray'    },    textPromptStyle:{      margin:widthOfMargin,      fontSize:20    },    bigTextPrompt:{      margin:widthOfMargin,      backgroundColor:'gray',      color:'white',      textAlign:'center',      fontSize:30    }  });AppRegistry.registerComponent('HelloWorldTest',()=>HelloWorldTest);

原创粉丝点击