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

来源：互联网发布：淘宝网女士夏季服装编辑：程序博客网时间：2024/06/05 11:36

此博客基于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,    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  不是  exportmodule.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);