關(guān)于TextInput組件詳細(xì)資料，請查看:TextInput

下面我們來寫一個(gè)QQ登錄界面

1.首先我們來學(xué)習(xí)一下如何引入外部的組件？
在項(xiàng)目根目錄下新建一個(gè)LoginView.js文件：

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View } from 'react-native';class LoginView extends Component {render() {return (<View style={styles.container}><Text style={styles.welcome}>我是登錄界面</Text></View>);} }const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',}, });// 導(dǎo)出 module.exports = LoginView;

這個(gè)組件要想被使用，關(guān)鍵一句話代碼是: module.exports = LoginView

2.那么接著我們來看看index.ios.js里是如何使用到LoginView.js定義的組件的？

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View } from 'react-native';// 引入外部的js文件 var LoginView = require('./LoginView');class QQLoginDemo extends Component {render() {return (// 使用QQ登錄界面組件<LoginView />);} }AppRegistry.registerComponent('QQLoginDemo', () => QQLoginDemo);

2個(gè)關(guān)鍵點(diǎn)：先要引入js文件var LoginView = require('./LoginView');，然后在自己的組件理使用 <LoginView />
完成上面2步，效果如下圖：

3.從上可知，我們只要修改LoginView.js文件就可以完成QQ登錄界面的布局啦

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,Image,TextInput } from 'react-native';var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window').width; var screenH = Dimensions.get('window').height;class LoginView extends Component {render() {return (<View style={styles.container}><Image source={require('./img/icon.jpg')} style={styles.iconStyle} /><TextInput keyboardType={'number-pad'} placeholder={'QQ號碼/手機(jī)/郵箱'} style={styles.textInputStyle} /><TextInput placeholder={'密碼'} password={true} style={styles.textInputStyle} /><View style={styles.loginBtnStyle}><Text style={styles.loginTextStyle}>登錄</Text></View><View style={styles.settingStyle}><Text style={styles.settingTextStyle}>無法登錄?</Text><Text style={styles.settingTextStyle}>新用戶注冊</Text></View></View>);} }const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#E7E7E7',// 設(shè)置側(cè)軸對齊方式alignItems:'center',},iconStyle:{marginTop:50,marginBottom:10,width:80,height:80,borderWidth:2,borderColor:'white',borderRadius:40},textInputStyle:{height:44,width:screenW,backgroundColor:'white',marginBottom:1,textAlign:'center'},loginBtnStyle:{height:38,width:screenW * 0.85,backgroundColor:'#0080D6',justifyContent:'center',alignItems:'center',marginTop:20,borderRadius:3},loginTextStyle:{color:'white'},settingStyle:{width:screenW * 0.85,// 設(shè)置主軸的方向flexDirection:'row',// 主軸對齊方式justifyContent:'space-between',// 絕對定位position:'absolute',bottom:20,left:(screenW - screenW * 0.85) * 0.5,},settingTextStyle:{color:'#0080D6'}, });// 導(dǎo)出 module.exports = LoginView;

最后效果如下圖:

如果要允許到安卓上，只需要修改index.android.js（和index.ios.js一樣）

安卓上的坑：
1.iOS上不需要設(shè)置TextInput的寬度，默認(rèn)寬度就是屏幕寬度；而Android上需要給TextInput設(shè)置寬度，所以我們在樣式里加了width:screenW,。
屏幕寬度取值:var screenW = Dimensions.get('window').width;
2.這個(gè)界面還有一個(gè)坑，從上圖也可以看出：密碼框架竟然是明文的（iOS則沒有這個(gè)問題），觀察代碼其實(shí)我們設(shè)置了 password={true}。這個(gè)坑，我這里暫時(shí)沒有解決。

=============
百度了一下，密碼框在安卓明文顯示的問題 已解決：

secureTextEntry={true}

總結(jié)

以上是生活随笔為你收集整理的TextInput组件练习 - QQLogin界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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