今天记录的是使用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',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,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',bottomrightbtnview: {
		flex: 1,paddingRight: 10,alignItems: 'flex-end',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。