今天記錄的是使用React Native實現(xiàn)QQ的登錄界面，如果不了解React Native，請看React Native中文網(wǎng)站：http://reactnative.cn/

下面是一張手機QQ的登錄界面截圖：

下面是用React Native實現(xiàn)的類似上圖的登錄效果圖：

可以看到，在界面效果上，React Native實現(xiàn)的一點都不比原生應(yīng)用差，下面就貼上所有代碼，在完成這個界面前需要了解下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風(fēng)格的輸入框，如果想去掉輸入框下面的橫線，需要給<TextInput>指定一個underlineColorAndroid屬性，屬性值為'transparent'，這樣就可以去掉輸入框下面的橫線了；

2、密碼輸入框需要指定屬性：secureTextEntry={true}，指定該屬性后輸入的文本才會被黑點替代；

3、要顯示圖片，必須為<Image>標(biāo)簽指定寬度和高度，和Android中不同的是，<Image>沒法自動調(diào)整圖片的大小，沒有類似Android中的wrap_content。

總結(jié)

以上是生活随笔為你收集整理的3、React Native实战——实现QQ的登录界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。