3、React Native实战——实现QQ的登录界面
来源:互联网 发布:windows7优化大师软件 编辑:程序博客网 时间:2024/06/10 00:31
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/
下面是一张手机QQ的登录界面截图:
下面是用React Native实现的类似上图的登录效果图:
可以看到,在界面效果上,React Native实现的一点都不比原生应用差,下面就贴上所有代码,在完成这个界面前需要了解下React Native中的flexbox布局,如果不是很清楚flexbox布局,建议看下我的上一篇博文。
'use strict';import React, {AppRegistry,Component,StyleSheet,Text,Image,View,TextInput} from 'react-native';class LoginPanel extends Component {render() {return (<View style={styles.container}><View style={styles.header}><Text style={styles.headtitle}>添加账号</Text></View><View style={styles.avatarview}><Image source={require('./images/ic_sina.png')} style={styles.avatarimage}/></View><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.emptyview}></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 = {container: {flex: 1,backgroundColor: '#FFFFFF'},header: {height: 50,justifyContent: 'center',},headtitle: {alignSelf: 'center',fontSize: 18,color: '#000000',},avatarview: {height: 150,backgroundColor: '#ECEDF1',justifyContent: 'center',},avatarimage: {width: 100,height: 100,alignSelf: 'center'},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('HelloWorld', () => LoginPanel);下面说下代码中需要注意的地方:
1、<TextInput>组件在React Native中,默认是带一条横线的,也就是material design风格的输入框,如果想去掉输入框下面的横线,需要给<TextInput>指定一个underlineColorAndroid属性,属性值为'transparent',这样就可以去掉输入框下面的横线了;
2、密码输入框需要指定属性:secureTextEntry={true},指定该属性后输入的文本才会被黑点替代;
3、要显示图片,必须为<Image>标签指定宽度和高度,和Android中不同的是,<Image>没法自动调整图片的大小,没有类似Android中的wrap_content。
2 0
- 3、React Native实战——实现QQ的登录界面
- React-Native 实现QQ登录界面
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- react-native仿qq登录界面布局
- react-native学习之路5-仿照qq登录界面搭建了布局
- React Native实战项目企业通信录(含视频教程)- 登录界面开发
- java实现简单的QQ登录界面
- React-native学习过程 五 登录界面
- 【React Native 实战】微信登录
- React Native 实现类似QQ的侧滑列表效果
- react-native统一入口界面,并实现页面的跳转
- qq登录界面及其实现
- React Native控件之TextInput组件介绍以及实际登录界面实现
- React-Native初体验四(window下实现登录界面)
- React Native实战项目企业通信录(含视频教程)- 登录功能实现
- React Native移动开发实战-3-实现页面间的数据传递
- JAVA第一课——qq登录界面的开发
- React Native实现二维码管理界面
- 用Python Pandas处理亿级数据
- IOS高级控件(三)
- QLable的“超链接”形式
- IOS高级控件(四)
- Codeforces 617B Chocolate 【dp】
- 3、React Native实战——实现QQ的登录界面
- IOS应用生命周期
- 如何画人脑?
- hdu 5610 Baby Ming and Weight lifting
- UISearchBar控件
- Python中如何写控制台进度条的整理
- android.util.AndroidRuntimeException: requestFeature() must be called before adding content
- android md5加密(小写32位)
- 中国十大B2C电商网站开发语言调查