3 React Native实战——实现QQ的登录界面

今天记录的是使用React Native实现QQ的登录界面，如果不了解React Native，请看React Native中文网站：/

下面是一张手机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。