小碼哥-React-Native初體驗四（window下實現登錄界面）

這篇文章是居於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);

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

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