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(
          {
                  this.setState({text});
                  this.props.onChangeText(text);
              }} {...this.props}>
          
        )
    }
}

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(
          
            {
                    this.setState({text});
                    this.props.onChangeText(text);
                }} {...props}>
            

            {
                  this.setState({
                    showPwd:!this.state.showPwd,
                  });
                }}>
                
            
          
        )
    }
}
export default class RegisterComponent extends Component {
    constructor(props){
        super(props);

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

   render(){
    return(
      
        
          {i18n.t('Account.phoneNum')}
           {
            this.userName = text;
          }}/>
        

        
          {i18n.t('Account.messageCode')}
           {
              this.verifyCode = text;
          }}/>
          
            {i18n.t('Account.getMessageCode')}
          
        

        
          {i18n.t('Account.loginPassword')}
           {
              this.passwd = text;
            }}
          />
        
        
      
    )
  }

  //返回按钮
  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',
  },
});

运行效果如下：

image.png