作者:阿钟
博客: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
新浪微博:@刘某人程序员