今天記錄的是使用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。