这篇文章是居于reactNativeTest项目的，要是没有看过之前的文章请先看React-Native初体验一 |React-Native初体验二 | React-Native初体验三

1.界面效果

2.代码实现
1.新建一个Login.js文件

2.渲染界面

render() {
    return (
        <View style={{backgroundColor:'#f5f5f5',flex:1}}>
            <View  style={styles.title_bar}>
                <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                  style={styles.topbar_left_item}>
                    <Text >登录</Text>
                </TouchableOpacity>
                //占位置
                <Text style={{flex:2}} ></Text>
                <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                  style={styles.topbar_left_item}>
                    <Text >注册</Text>
                </TouchableOpacity>
            </View>
            //输入账号
            <View style={styles.input_item}>
                <Text style={{marginLeft:5}}> 账号：</Text>
                <TextInput
                    style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
                    placeholder="手机号码/邮箱"
                    .....
                />
            </View>
            //输入密码
            <View style={styles.input_item}>
                <Text style={{marginLeft:5}}> 密码：</Text>
                <TextInput
                    style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
                    placeholder="密码"
                    .....
                />
            </View>
            //忘记密码
            <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                              style={{height:48,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                <Text style={{fontSize:13}}>忘记密码？</Text>
            </TouchableOpacity>
            //点击登录按钮
            <View style={styles.btn_login}>
                <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                  >
                    <Text style={{color:'white',fontSize:18}}>登录</Text>
                </TouchableOpacity>
            </View>
            //占位置
            <View style={{flex:2}}></View>
            //第三方登录
            <View style={{marginBottom:20,alignItems:'center'}}>
                <Text style={{fontSize:13,color:'#777'}}>第三方账号登录</Text>
                    ............
                </View>
            </View>
        </View>
    );
}

3.修改index.android.js

/**这里是导包，导入我们要使用的控件*/
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
/**导入一个自己写的js文件*/
import Login from './app/page/Login.js';
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('reactNativeTest', () => Login);

/**
 * Created by Administrator on 2016/9/18 0018.
 */
'use strict';
import React, { Component } from 'react';
import{
    View,
    Text,
    BackAndroid,
    TouchableOpacity,
    Image,
    TextInput,
    StyleSheet,
} from 'react-native';
import { NaviGoBack } from '../utils/CommonUtils';
var password='';
var username='';
class Login extends Component {
    constructor(props) {
        super(props);
        /**
         * 初始化方法
         * @type {function(this:Login)}
         */
        this.buttonBackAction=this.buttonBackAction.bind(this);//返回
    }
    /**
     * 返回
     */
    buttonBackAction(){
        const {navigator} = this.props;
        return NaviGoBack(navigator);
    }
    /**
     * 其它的登录方法
     * @param postion
     * @returns {*}
     */
    otherLogin(postion){
        //weixin
        if(postion==0){
        //qq
        }else if(postion==1){
        //weibo
        }else if(postion==2){
        }
    }
    render() {
        return (
            <View style={{backgroundColor:'#f5f5f5',flex:1}}>
                <View  style={styles.title_bar}>
                    <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                      style={styles.topbar_left_item}>
                        <Text >登录</Text>
                    </TouchableOpacity>
                    <Text style={{flex:2}} ></Text>
                    <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                      style={styles.topbar_left_item}>
                        <Text >注册</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.input_item}>
                    <Text style={{marginLeft:5}}> 账号：</Text>
                    <TextInput
                        style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
                        placeholder="手机号码/邮箱"
                        placeholderTextColor="#aaaaaa"
                        underlineColorAndroid="transparent"
                        numberOfLines={1}
                        ref={'username'}
                        multiline={true}
                        onChangeText={(text) => {
                               username = text;
                            }}
                    />
                </View>
                <View style={styles.input_item}>
                    <Text style={{marginLeft:5}}> 密码：</Text>
                    <TextInput
                        style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
                        placeholder="密码"
                        placeholderTextColor="#aaaaaa"
                        underlineColorAndroid="transparent"
                        numberOfLines={1}
                        ref={'password'}
                        multiline={true}
                        secureTextEntry={true}/**设计输入的文字不可见*/
                        onChangeText={(text) => {
                               password = text;
                            }}
                    />
                </View>
                <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                  style={{height:48,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                    <Text style={{fontSize:13}}>忘记密码？</Text>
                </TouchableOpacity>
                <View style={styles.btn_login}>
                    <TouchableOpacity onPress={() => {this.buttonBackAction()}}
                                      >
                        <Text style={{color:'white',fontSize:18}}>登录</Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex:2}}></View>
                <View style={{marginBottom:20,alignItems:'center'}}>
                    <Text style={{fontSize:13,color:'#777'}}>第三方账号登录</Text>
                    <View style={{flexDirection:'row',marginTop:20}}>
                        <TouchableOpacity onPress={()=>{this.otherLogin(0)}}>
                            <Image source={require('../image/ic_login_weixin.png')} style={{width:50,height:50}}/>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.otherLogin(1)}} style={{marginLeft:15}}>
                            <Image source={require('../image/ic_login_qq.png')} style={{width:50,height:50}}/>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.otherLogin(2)}} style={{marginLeft:15}}>
                            <Image source={require('../image/ic_login_weibo.png')} style={{width:50,height:50}}/>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}
const styles=StyleSheet.create({
    input_item:{
        backgroundColor:'white',
        height:48,
        flexDirection:'row',
        alignItems:'center',
    },
    title_bar:{
        height:48,
        flexDirection:'row',
    },
    topbar_left_item:{
        width:48,
        height:48,
        alignItems:'center',
        justifyContent:'center'
    },
    btn_login:{
        height:48,
        backgroundColor:'#96E4DA',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        marginLeft:5,
        marginRight:5,
    }
});
export default Login;