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

今天记录的是使用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。