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;