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）是垂直的，所以我们只需要在< Image>标签下继续添 文本输入框即可

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

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

textInput: {
    height: 40,
    width: width,
    marginBottom: 5,
    backgroundColor: 'white',
    textAlign: 'center',
},

• 这里介绍一下使用到的属性
• 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',
    alignItems: 'center',
    //设置主轴为两端对齐
    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,
    Text,
    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',
        backgroundColor: '#dddddd',
        //设置次轴的对齐方式
        alignItems: 'center',
    },
    //省略若干代码...
});

//输出本类  记住一定是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梦传送门