React-Native初体验四（window下实现登录界面）

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

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

2.渲染界面

render() {
    return (
        
            
                 {this.buttonBackAction()}}
                                  style={styles.topbar_left_item}>
                    登录
                
                //占位置
                
                 {this.buttonBackAction()}}
                                  style={styles.topbar_left_item}>
                    注册
                
            
            //输入账号
            
                 账号：
                
            
            //输入密码
            
                 密码：
                
            
            //忘记密码
             {this.buttonBackAction()}}
                              style={{height:48,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                忘记密码？
            
            //点击登录按钮
            
                 {this.buttonBackAction()}}
                                  >
                    登录
                
            
            //占位置
            
            //第三方登录
            
                第三方账号登录
                    ............
                
            
        
    );
}

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

Login.js文件的完整代码：

/**
 * 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 (
            
                
                     {this.buttonBackAction()}}
                                      style={styles.topbar_left_item}>
                        登录
                    
                    
                     {this.buttonBackAction()}}
                                      style={styles.topbar_left_item}>
                        注册
                    
                
                
                     账号：
                     {
                               username = text;
                            }}
                    />
                
                
                     密码：
                     {
                               password = text;
                            }}
                    />
                
                 {this.buttonBackAction()}}
                                  style={{height:48,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                    忘记密码？
                
                
                     {this.buttonBackAction()}}
                                      >
                        登录
                    
                
                
                
                    第三方账号登录
                    
                        {this.otherLogin(0)}}>
                            
                        
                        {this.otherLogin(1)}} style={{marginLeft:15}}>
                            
                        
                        {this.otherLogin(2)}} style={{marginLeft:15}}>
                            
                        
                    
                
            
        );
    }
}
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;

来源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=2274&extra=page%3D1