React Native实现简单的登录功能(推荐)


Posted in Javascript onSeptember 19, 2016

React Native 简介:

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。

学习React Native也有2个月了,从最开始的页面到点点击事件,到调用接口大体都会了,今天实现一个简单的登录功能。

React Native实现简单的登录功能(推荐)

这里需要说明几点:

1、<TextInput>组件在React Native中,默认是带一条横线的,如果想去掉输入框下面的横线,需要给<TextInput>指定一个underlineColorAndroid='transparent',这样就可以去掉输入框下面的横线了;

2、密码输入框需要指定属性:secureTextEntry={true}

3、要显示图片,必须为<Image>标签指定宽度和高度,和Android中不同的是,<Image>没法自动调整图片的大小,没有类似Android中的wrap_content。

代码如下:

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 
import React, {Component} from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
Image, 
View, 
TextInput 
} from 'react-native'; 
class ReactDemo extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<View style={styles.header}> 
<Text style={styles.headtitle}>添加账号</Text> 
</View> 
<View style={styles.marginTopview}/> 
<View style={styles.inputview}> 
<TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='QQ号/手机号/邮箱'/> 
<View style={styles.dividerview}> 
<Text style={styles.divider}></Text> 
</View> 
<TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='密码' 
secureTextEntry={true}/> 
</View> 
<View style={styles.bottomview}> 
<View style={styles.buttonview}> 
<Text style={styles.logintext}>登 录</Text> 
</View> 
<View style={styles.bottombtnsview}> 
<View style={styles.bottomleftbtnview}> 
<Text style={styles.bottombtn}>无法登录?</Text> 
</View> 
<View style={styles.bottomrightbtnview}> 
<Text style={styles.bottombtn}>新用户</Text> 
</View> 
</View> 
</View> 
</View> 
); 
} 
} 
const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: '#FFFFFF' 
}, 
header: { 
height: 50, 
backgroundColor: '#12B7F5', 
justifyContent: 'center', 
}, 
headtitle: { 
alignSelf: 'center', 
fontSize: 20, 
color: '#ffffff', 
}, 
avatarview: { 
height: 150, 
backgroundColor: '#ECEDF1', 
justifyContent: 'center', 
}, 
avatarimage: { 
width: 100, 
height: 100, 
alignSelf: 'center' 
}, 
marginTopview: { 
height: 15, 
backgroundColor: '#F7F7F9' 
}, 
inputview: { 
height: 100, 
}, 
textinput: { 
flex: 1, 
fontSize: 16, 
}, 
dividerview: { 
flexDirection: 'row', 
}, 
divider: { 
flex: 1, 
height: 1, 
backgroundColor: '#ECEDF1' 
}, 
bottomview: { 
backgroundColor: '#ECEDF1', 
flex: 1, 
}, 
buttonview: { 
backgroundColor: '#1DBAF1', 
margin: 10, 
borderRadius: 6, 
justifyContent: 'center', 
alignItems: 'center', 
}, 
logintext: { 
fontSize: 17, 
color: '#FFFFFF', 
marginTop: 10, 
marginBottom: 10, 
}, 
emptyview: { 
flex: 1, 
}, 
bottombtnsview: { 
flexDirection: 'row', 
}, 
bottomleftbtnview: { 
flex: 1, 
height: 50, 
paddingLeft: 10, 
alignItems: 'flex-start', 
justifyContent: 'center', 
}, 
bottomrightbtnview: { 
flex: 1, 
height: 50, 
paddingRight: 10, 
alignItems: 'flex-end', 
justifyContent: 'center', 
}, 
bottombtn: { 
fontSize: 15, 
color: '#1DBAF1', 
} 
}); 
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

以上所述是小编给大家介绍的React Native实现登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 #Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 #Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 #Javascript
Node.js的基本知识简单汇总
Sep 19 #Javascript
React实现双向绑定示例代码
Sep 19 #Javascript
vue从使用到源码实现教程详解
Sep 19 #Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 #Javascript
You might like
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
JavaScript去除空格的几种方法
2006/10/03 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python xml解析实例详解
2016/11/14 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
利用python求相邻数的方法示例
2017/08/18 Python
利用Python检测URL状态
2019/07/31 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
使用Python实现音频双通道分离
2020/12/25 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
好邻里事迹材料
2014/01/16 职场文书
一般纳税人申请报告
2015/05/18 职场文书
会计实训总结范文
2015/08/03 职场文书
月考总结与反思
2015/10/22 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
Python实现信息管理系统
2022/06/05 Python