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

作者：阿钟

博客：http://my.csdn.net/a_zhon

此博客基于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设备上的主入口）里面的内容：

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

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

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

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

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

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

接下来就是绘制 账号和密码输入框了

我们的根View布局主轴的方向是（column）是垂直的，所以我们只需要在标签下继续添 文本输入框即可

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

这里介绍一下使用到的属性

• placeholder 设置输入提示内容（相当于Android EditText 的hint属性）

• underlineColorAndroid 设置输入框的下划线的颜色(在Android系统中)

• secureTextEntry 设置输入框 是否为安全框

• 更多详细的属性看这里TextInput

• 上面我们使用了一个width变量这个就是获取的屏幕的宽度，那么是怎么获取的呢？来看一下吧：Dimensions

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

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

来看下现在的效果： 

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

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

同时支持ios和android设备运行

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

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

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

终极效果

【文中链接】

解决方案：http://blog.csdn.net/a_zhon/article/details/77978383

使用Flexbox布局：http://reactnative.cn/docs/0.48/layout-with-flexbox.html#content

TextInput：http://reactnative.cn/docs/0.48/textinput.html#content

Dimensions：http://reactnative.cn/docs/0.48/dimensions.html#content

Button：http://reactnative.cn/docs/0.48/button.html#content

TouchableOpacity：http://reactnative.cn/docs/0.48/touchableopacity.html#content

Flexbox：http://reactnative.cn/docs/0.48/layout-with-flexbox.html#content

【码源】https://github.com/azhon/ReactNative/tree/master/QQLoginPage

一命二运三风水，四修阴德五读书！

刘桂林

微信号 : Android_LiuGuiLin

新浪微博：@刘某人程序员