ReactNative基础(一)编写一个登录页面
来源:互联网 发布:小丽和小云在计算 编辑:程序博客网 时间:2024/06/05 17:54
作者:阿钟
博客: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
新浪微博:@刘某人程序员
- ReactNative基础(一)编写一个登录页面
- ReactNative基础(一)编写一个登录页面
- HBuilder 入门(5) / 编写一个登录页面
- HBuilder 入门(5) 编写一个登录页面
- ReactNative基础(四)了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
- ReactNative基础(四)了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
- ReactNative学习九-登录页面
- 登录页面设计(一)
- c# 编写winform登录注册程序(一,登录部分)
- ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator)
- ReactNative基础(六)使用react-navigation实现页面导航布局效果(TabNavigator)
- ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator
- ReactNative进阶---FlatList(一)
- 一个简单的登录页面(1)
- 一个简单的登录页面(2)
- 一个注册登录页面
- ReactNative 基础
- 登录注册页面的框架(一)
- HTML随机数掷筛子比较
- 商品表
- 【makefile】一起写makefile(五)--变量的使用
- 第二周
- MainActivity
- ReactNative基础(一)编写一个登录页面
- okhttpclient登录
- 无限轮播
- [Day Zero]
- MyAdapter
- 从分布式到微服务,深挖Service Mesh
- MyApplication
- angularJS如何定义一个随机数
- 模拟淘宝库存的增加删除