混合开发的大趋势之一React Native之简单的登录界面
转载请注明出处:王亟亟的大牛之路
这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从“实战”中讲解吧
还是继续安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 依旧日更,会定期添加分组,让你找“大腿”更方便
先上下效果图
效果很简单就是2个<Text/>
2个<TextInput/>
1个<Button/>
按钮控件是第三方的,就是为了演示下如何在RN环境下使用第三方库
构思:
登陆界面属于很能说明问题的Demo案例,这边主要告诉大家以下几个知识点
1.如何调试。
2.如何获取控件的值。
3.如何弹出Android的Toast。
4.如何使用第三方库。
5.其他。
登陆/注册行为通常是 当用户点击登录/注册按钮后提取输入框/表单内容,进行一定的校验然后做出一定的逻辑处理,然后页面得有一个Title类似于Android bar之类的至少让用户知道页面的功能差异。
调试:
要跑一个RN项目首先需要让他start起来
cd到你的项目目录,然后start就行
start完一般来说还要统一你的TCP地址,因为你的PC和你的手机要在同一网域下才可以联调
所以需要adb操作如下
因为是js界面所以你可以不用每次改代码就要刷新apk,摇一摇reload就行了,很方便
页面搭建
在构造函数中申明,password,userName 这两个state属性,把按钮行为绑定给我们自己写的_handlePress函数
constructor(props) {
super(props);
this.state = {
password: '',
userName: ''
}
this._handlePress = this._handlePress.bind(this);
}
为了防止页面长度超过一张页面,所以在最外层照一个<ScrollView>
,
(这种页面要是超长,那肯定是产品或者UI 脑子不正常,但是加下比较稳)
<ScrollView>
<View style={{
alignItems: 'center'
}}>
<View>
<Text style ={
styles.title
}>
霸气的大标题
</Text>
</View>
</View>
</ScrollView>
设置最外层View让所有的子控件都居中,默认左上,怎么设置可以看:http://blog.csdn.net/ddwhan0123/article/details/52242409
标题整完了就开始搭“表单部分的UI”
这里拿“账号”部分来做解释
<View style={{
width: 200,
flexDirection: 'row',
borderWidth: 1,
marginTop: 30
}}>
<Text style={{
marginLeft: 10,
alignSelf: 'center'
}}>
账号 :
</Text>
<TextInput placeholder='input userName' onChangeText={(text) => {
this.setState({userName: text});
}} style={{
flex: 1,
height: 40,
width: 100
}}/>
</View>
外层包裹一个水平布局的View,内部一个Text 一个TextInput
预设一个”android:hint=”input userName”
利用onChangeText回调方法设置userName的值为输入框的 text属性
然后 再添加按钮
按钮是git上搜的一个第三方库:https://github.com/ide/react-native-button
要引用也不复杂,首先cd 到你的项目目录,然后在CMD/终端输入
npm install react-native-button --save
他会自己下载,下载完 倒入你的.js文件内即可,像这样
import Button from 'react-native-button'
导好包就可以使用了,之前也说过,React提供了很好的Component封装,自定义的or等等都可以直接使用
<Button onPress={this._handlePress} style={{
fontSize: 20,
color: 'green'
}} styleDisabled={{
color: 'red'
}}>
Login
</Button>
把触控的传递事件传给了_handlePress方法,控件的参数也可以用 state里2个声明过的属性来获取。
ok,最后来看下我们的校验方法_handlePress
_handlePress() {
let password = this.state.password
let userName = this.state.userName
if (password.length > 0 && userName.length > 0) {
ToastAndroid.show('用户名 :' + userName + ' 密码 :' + password, ToastAndroid.SHORT)
} else {
ToastAndroid.show('数据缺失', ToastAndroid.SHORT)
}
}
根据2个 state属性来给变量赋值,然后判断变量的属性来显示不同的Toast
ToastAndroid
和安卓的Api很像
ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
传入两个参数,一个是要显示的内容,一个是持续时间
可以ToastAndroid.SHORT
或者 ToastAndroid.LONG
如果对位置有要求
ToastAndroid.showWithGravity('All Your Base Are Belong To Us', ToastAndroid.SHORT, ToastAndroid.CENTER);
位置也可以设置,如下:
ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.
总结:
整体来说不是很难,理解机制的话就不复杂
1.参数全部可以右state传递,通过各种回调做监听
2.props只作为初始化参数,因为只能设一次值
3.用let 做一定的封装,都是全局变量的话增加代码复杂度
4.可以学习下React.js 对于理解RN更方便,对于理解RN更方便,对于理解RN更方便 重要的话说三遍!!!
源码地址:https://github.com/ddwhan0123/ReactNativeDemo/blob/master/LoginDemo
混合开发的大趋势之一React Native之简单的登录界面的更多相关文章
- 混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- 混合开发的大趋势之一React Native之Image (脑动理解)
文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
- 浅谈移动应用的跨平台开发工具(Xamarin和React Native)
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...
随机推荐
- Android ArrayAdapter,BaseAdapter,SimpleAdapter适配器绑定数据方法
/** * 2017-07-31.Book 类 */ public class Book { public String getName() { return name; } public void ...
- 在VisualStudio 2013下使用VS2012的插件
由于VS2013刚刚推出,而VS的插件又是和版本强相关的,因此VS2013就存在一个插件比较少的问题.虽然2013相对与2012来说改动并不大,应该是拿来重新编译一番就可以使用了.但也得有一个过程,并 ...
- HOW TO FIX "EXPECTED BEGIN_ARRAY BUT WAS BEGIN_OBJECT" IN RETROFIT ?
https://www.freshbytelabs.com/2018/05/how-to-fix-expected-beginarray-but-was.html HOW TO FIX "E ...
- artTemplate模板使用补充
1. 添加辅助方法 ``template.helper(name, callback)``辅助方法一般用来进行字符串替换,如 UBB 替换.脏话替换等. 例如扩展一个UBB替换方法: template ...
- libtorch 哪些函数比较常用?
libtorch 加载 pytorch 模块进行预测示例 void mat2tensor(const char * path, torch::Tensor &output) { //读取图片 ...
- 浅谈virtualenv(虚拟环境)
简介 virtualenv为应用提供了隔离的Python运行环境,解决了不同应用间多版本的冲突问题. 例如: 如果我们要同时开发多个应用程序,那这些应用程序都会共用一个Python,就是安装在系统的P ...
- 类似于xml的一种数据传输格式protobuf
1.Protobuf 简介 Protocol Buffer是google 的一种数据交换的格式,已经在Github开源,目前最新版本是3.1.0.它独立于语言,独立于平台.google 提供了多种语言 ...
- html知识代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java-mybaits-00503-延迟加载
1.什么是延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...
- java 多线程 day07 多线程共享数据
/** * Created by chengtao on 17/12/3. * 多个线程 如何共享数据? * 常见实例:多个窗口同时售卖火车票 */public class Thread0701_Mu ...