React Native开发之路（二）

如果你搭建好环境后，学了一些js、css什么的，可以开始做界面，这里我就展示一下App里很常见的注册界面吧。我是初学者，代码写的不好，希望大家多提宝贵意见，谢谢。
本文主要将得是跟输入框相关的界面开发，详见代码，不懂的可以找我。

import React, { Component } from 'react';

import {
    TouchableOpacity,
    AppRegistry,
    View,
    Image,
    Button,
    Dimensions,
    StyleSheet,
    Text,
    TextInput,
    Alert,
    TouchableHighlight,
} from 'react-native';

import {TopBar,TopBarBack,CommButton,CommTextInput,} from './Comm';
import NetUtil from '../comm/NetUtil';
import HotelMainComponent from '../Hotel/Main';
import {i18n} from '../language/i18n';

export class AccountInput extends Component {
    constructor(props) {
        super(props);
        this.state = {text:''};
    }

    render() {
        return(
          <TextInput style={RegisterStyles.input}
              underlineColorAndroid='transparent'
              onChangeText={(text)=>{
                  this.setState({text});
                  this.props.onChangeText(text);
              }} {...this.props}>
          </TextInput>
        )
    }
}

export class PwdInput extends Component {
    constructor(props) {
        super(props);
        this.state = {text:''};
        this.state = {
          text:'',
          showPwd: false,
        };
    }

    static defaultProps = {
        ...TextInput.props,
        containerStyle:View.style,
        closeImg:Image.source,
        openImg:Image.source,
        imageStyle:Image.style,
    }

    render() {
        var props = Object.assign({}, this.props);
        var showImg = !this.state.showPwd? props.closeImg: props.openImg;
        return(
          <View style={props.containerStyle}>
            <TextInput style={[RegisterStyles.input, {paddingRight:30}]}
                underlineColorAndroid='transparent'
                secureTextEntry={!this.state.showPwd}
                onChangeText={(text)=>{
                    this.setState({text});
                    this.props.onChangeText(text);
                }} {...props}>
            </TextInput>

            <TouchableOpacity style={{position:'absolute', right:10, paddingLeft:16}}
                onPress={()=>{
                  this.setState({
                    showPwd:!this.state.showPwd,
                  });
                }}>
                <Image style={props.style} source={showImg}/>
            </TouchableOpacity>
          </View>
        )
    }
}
export default class RegisterComponent extends Component {
    constructor(props){
        super(props);

    this.userName = "";
    this.password = "";
    this.verifyCode = "";
    }

   render(){
    return(
      <View style={{flex: 1}}>
        <View style={RegisterStyles.row}>
          <Text style={RegisterStyles.label}>{i18n.t('Account.phoneNum')}</Text>
          <AccountInput placeholder={i18n.t('Account.phoneNumPlaceholder')} keyboardType='phone-pad' onChangeText={(text) => {
            this.userName = text;
          }}/>
        </View>

        <View style={RegisterStyles.row}>
          <Text style={RegisterStyles.label}>{i18n.t('Account.messageCode')}</Text>
          <AccountInput placeholder={i18n.t('Account.messageCodePlaceholder')} keyboardType='numeric'
            onChangeText={(text) => {
              this.verifyCode = text;
          }}/>
          <TouchableOpacity style={RegisterStyles.msgCodeBtn} onPress={this.OnPressGetVerify}>
            <Text style={{fontSize:14, color: '#3281DD'}}>{i18n.t('Account.getMessageCode')}</Text>
          </TouchableOpacity>
        </View>

        <View style={RegisterStyles.row}>
          <Text style={RegisterStyles.label}>{i18n.t('Account.loginPassword')}</Text>
          <PwdInput
            containerStyle={{flex:1, height:45, justifyContent:'center'}}
            closeImg={require('../../res/images/eye_close.png')}
            openImg={require('../../res/images/eye_open.png')}
            imageStyle={{width:20, height:20}}
            placeholder={i18n.t('Account.passwordPlaceholder')}
            autoCapitalize = 'none'
            onChangeText={(text) => {
              this.passwd = text;
            }}
          />
        </View>
        <CommButton name='注册' onPressCallback={this.onPressCallback.bind(this)}/>
      </View>
    )
  }

  //返回按钮
  onPressBack(){
  }

  //按钮触发函数
  onPressCallback(){
  }

  //登陆请求的回复
  OnRegisterRes(response){
  }

  //获取验证码
  OnPressGetVerify(){
}

const RegisterStyles = StyleSheet.create({
  row:{
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 20,
    marginRight: 20,
    paddingTop: 10,
    paddingBottom: 10,
    borderBottomWidth: 0.8,
    borderColor: '#3281DD',
  },

  label:{
    width: 70,
    color: 'black',
    fontSize: 16,
  },

  input:{
    height: 45,
    flex: 1,
  },

  msgCodeBtn:{
    height: 45,
    width: 80,
    justifyContent:'center',
  },
});

运行效果如下：