ReactNative基础一编写一个登录页面

此博客基于react-native-0.48.4

React Native 一个跨平台开发的语言！一套代码可以同时跑在多个端，想想都刺激；下面就来用RN开发一个登录页面，熟悉语法和RN代码的编写（大神可以出门右拐）

来看下我们要实现的效果图：

• React Native 中文网：http://reactnative.cn/docs/0.48/getting-started.html
• 在这里你可以跟着教程搭建一个开发环境（目前最新版本为v0.48；2017年09月18）
• 我是搭建的Android开发环境，当我尝试着安装到ios模拟器上时出现了一个错误这里给出解决方案
• 开发工具当然是毫无疑问的选择我们JetBrains的WebStorm了

先来简单介绍一下在RN中一个重要的布局方式Flexbox布局

Flexbox重要的的三个属性
● flexDirection：决定主轴的排列方式，默认值是竖直轴(column)方向；取值=[column、row]
● justifyContent：决定其子元素沿着主轴的排列方式；取值=[flex-start、center、flex-end、space-around、space-between]
● alignItems：决定其子元素沿着次轴（与主轴垂直的轴）排列方式；取值= [flex-start、center、flex-end、stretch]（注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）
● 使用Flexbox布局
● 说了这么多，还是来通过一张图来理解这三个属性

创建一个新项目,先来看下默认的index.android.js（也就是运行在Android设备上的主入口）里面的内容：

import React,{Component} from 'react';
import {//引入我们使用的到包
    AppRegistry,StyleSheet,Text,View
} from 'react-native';

export default class Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started,edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
            </View>
        );
    }
}

//定义我们控件的样式
const styles = StyleSheet.create({
    container: {
        flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
        fontSize: 20,textAlign: 'center',margin: 10,instructions: {
        textAlign: 'center',color: '#333333',marginBottom: 5,});
//注册我们的组件（只需要在 index.android.js、index.ios.js注册即可）这里用引号括起来的'Test'必须和你init创建的项目名一致
AppRegistry.registerComponent('Test',() => Test);

现在就可以在这个页面上进行自己的创作了，return()返回的就是我们的页面（在Android中可以称之为是一个布局）

• 那就开始绘制我们的登录页吧，先来布局我们的头像：

return (
    //为我们的根视图设置一个样式
    <View style={styles.container}>
        {/*为头像设置一个样式，和图片资源*/}
        <Image style={styles.circleImage} source={require('./src/image/logo.png')}/>
    </View>
);

//一些属性的意思，直接看单词就可以知道了就不用一一解释了
const styles = StyleSheet.create({
    container: {
        flex: 1,//相当于android布局的weight 充满容器
        flexDirection: 'column',backgroundColor: '#dddddd',//设置次轴的对齐方式
        alignItems: 'center',circleImage: {
        width: 80,height: 80,borderRadius: 40,borderWidth: 2,borderColor: 'white',marginTop: 100,marginBottom: 25,}

< Image>标签通过source={require('./src/image/logo.png')require引入一个图片资源（使用的是相对路径）.
项目的目录结构:

这样一个简单的圆形头像就出来了：运行的效果

上面View的样式是分开来定义的，当然我们也可以直接在View上接着写代码，格式如下：

<Image style={{
        width: 80,height: 80,borderRadius: 40,borderWidth: 2,borderColor: 'white',marginTop: 100,marginBottom: 25,}} source={require('./src/image/logo.png')}/>

如果我们要重新看程序的运行效果，只需要按两下R键或者 Ctrl/Command + M

#### 接下来就是绘制 账号和密码输入框了 > 我们的根View布局主轴的方向是（column）是垂直的，所以我们只需要在标签下继续添 文本输入框即可

{/*用户名*/}
<TextInput  style={styles.textInput} placeholder={'请输入用户名'} //输入框下划线 underlineColorAndroid={'transparent'}/>
{/*密码*/}
<TextInput  style={styles.textInput} placeholder={'请输入密码'} secureTextEntry={true} underlineColorAndroid={'transparent'}/>

样式也是一样继续在已有的后面追加

textInput: { height: 40,width: width,backgroundColor: 'white',},

• 这里介绍一下使用到的属性
• placeholder 设置输入提示内容（相当于Android EditText 的hint属性）
• underlineColorAndroid 设置输入框的下划线的颜色(在Android系统中)
• secureTextEntry 设置输入框 是否为安全框
• 更多详细的属性看这里TextInput
• 上面我们使用了一个width变量这个就是获取的屏幕的宽度，那么是怎么获取的呢？来看一下吧：Dimensions

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度和高度
var {width,height} = dimensions.get('window');

接下来就要绘制登录按钮来，Rn中有Button标签但是并不推荐使用这个;我们可以使用这个TouchableOpacity来代替Button，具体可以查看官方文档说明

{/*登录*/}
<TouchableOpacity style={styles.btnStyle}>
    <Text style={styles.loginText}>登录</Text>
</TouchableOpacity>

btnStyle: { height: 40,width: width - 32,borderRadius: 5,marginTop: 20,backgroundColor: '#4398ff',//沿主轴方向居中 justifyContent: 'center',loginText: { //指定文本的对齐方式 textAlign: 'center',color: 'white',//设置文本垂直方向居中 textAlignVertical: 'center',

这里就开始绘制登录按钮下面的 无法登录和新用户这两个文本了，分析：这两个文本是一水平方式排列的 而且分别左右对齐，所以我们需要在这两个文本外面嵌套View容器并指定主轴方向为row;同时还需要设置左右对齐那么只需要主轴的排列方式即可Flexbox

{/*无法登录 新用户*/} <View style={styles.canNot}> <Text style={{color: '#4398ff'}}>无法登录</Text> <Text style={{color: '#4398ff'}}>新用户</Text> </View>

canNot: { width: width - 32,marginTop: 15,flexDirection: 'row',//设置主轴为两端对齐 justifyContent: 'space-between',

来看下现在的效果：

现在就只剩下最后一部分了左下角的其他登录方式；这里就需要使用到绝对定位了，来看下代码吧

{/*其它登录方式*/}
<View style={styles.loginTheWay}>
    <Text>其它登录方式：</Text>
    <Image style={styles.image} source={require('./src/image/alipay.png')}/>
    <Image style={styles.image} source={require('./src/image/wechat.png')}/>
</View>

loginTheWay: { flexDirection: 'row',//设置次轴的对齐方式 alignItems: 'center',justifyContent: 'flex-start',//绝对定位 position: 'absolute',//距离底部还有30 距离左边还有10 这样的一个位置 bottom: 30,left: 10,image: { width: 50,height: 50,marginLeft: 5,borderRadius: 25,

写到这里就把这个登录页面给画完了，这里讲的都是页面布局所以不是很难，耐心理解下就会了。那么如果我们要同时运行在ios和Android设备上要怎么弄呢？其实也是很简单，需要在index.android.js,index.ios.js入口文件中引用同一个页面就可以了，下面就一起来看下吧。

同时支持ios和android设备运行

我们在项目的src目录下继续创建一个js的文件夹(要有一个良好的分包习惯)在js目录下创建一个LoginView.js文件这里就可以来写我们刚搭建的登陆界面，这样好让其他地方引用：

import React,{Component} from 'react';
import {
    StyleSheet,Image,TextInput,TouchableOpacity,View
} from 'react-native';

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度
var {width} = dimensions.get('window');

class LoginView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image style={styles.circleImage} source={require('../image/logo.png')}/>
                 //省略若干代码...
                </View>
            </View>
        );
    }
}
//以下为样式代码
const styles = StyleSheet.create({
    container: {
        flex: 1,flexDirection: 'column',//省略若干代码...
});

//输出本类 记住一定是exports 不是 export
module.exports = LoginView;

重点是最后一行代码module.exports = LoginView输出本类，这样在其他地方就可以引用了

现在我们来修改index.android.js文件，ios的入口也是一样的只需要把代码拷贝过去即可

import React,{Component} from 'react';

import {
    AppRegistry,} from 'react-native';

//引入外部的js文件
var LoginView = require('./src/js/loginView');

class QQLoginPage extends Component {
    render() {
        return (
            //字母必须大写开头
            <LoginView/>
        );
    }
}

AppRegistry.registerComponent('QQLoginPage',() => QQLoginPage);

终极效果

源码在这里多啦A梦传送门