轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50589570](http://blog.csdn.net/developer_jiangqq/article/details/50589570) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ???【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?? ? ? ? 今天我們一起來看一下文本輸入框TextInput組件的相關使用講解以及模仿實現一下QQ登錄界面的效果。具體環境搭建以及相關配置的請查看之前的相關文章。 ???????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,ReactNative技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ???????? TextInput組件允許用戶在應用中通過鍵盤進行輸入文本信息。并且該組件還提供了多種配置屬性例如:自動拼寫修復,自動大小寫切換,占位默認字符設置以及多種不同類型的鍵盤切換例如:我們可以彈出數字鍵盤。 # (二)實例 ????????? TextInput組件和前面講的Image或者Text組件差不多，用起來都非常簡單。我們直接在應用中添加一個TextInput組件，然后給該組件添加相關屬性(例:邊框顏色,粗細,背景,默認值)以及監聽方法(例如:輸入信息,焦點變化等事件)。我們首先看一下官方提供的一個簡單例子:???????? ~~~ <TextInput style={{height: 40, borderColor: 'gray',borderWidth: 1}} onChangeText={(text) =>this.setState({text})} value={this.state.text} /> ~~~ 該直接定義了TextInput組件，同時設置組件的風格高度,變寬粗細以及邊框顏色。并且我們這邊監聽了TextInput的onChangeText的事件來進行獲取用戶的輸入信息。除了該監聽事件方法以外還有onSubmitEditing(提交編輯)以及onFoucs(輸入框獲取焦點的時候調用)等相關的監聽方法。 ???????????下面在演示另外一個TextInput實例，該創建了三個TextInput，同時每個TextInput都添加了默認信息(hit)，第一個TextInput組件設置高度40,邊框粗細和邊框的顏色，切可以輸入多行信息。第二個TextInput設置左右額邊距以及自動獲取到焦點。第三個TextInput設置不可編輯狀態。具體代碼如下: ~~~ <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <TextInputstyle={{height:40,borderColor:'red',borderWidth:1}} multiline={true} defaultValue='默認信息1' /> <TextInput style={{marginLeft:10,marginRight:10}} autoFocus={true} defaultValue='默認信息2'/> <TextInput editable={false} defaultValue='默認信息3'/> </View> ~~~ 具體運行效果如下:  # (三)屬性方法(這邊講解平臺公用以及Android生效的屬性方法) ????????? 3.1.View?支持View的相關屬性 ????????? 3.2.autoCapitalize??控制TextInput輸入的字符進行切換成大寫(可選擇參數:'none', 'sentences', 'words','characters') * none:不自動切換任何字符成大寫 * sentences:默認每個句子的首字母變成大寫 * words:每個單詞的首字母變成大寫 * characters:每個字母全部變成大寫 3.3.autoCorrect??bool??設置拼寫自動修正功能?默認為開啟(true) 3.4.autoFocusbool??設置是否默認獲取到焦點默認為關閉(false)。該需要componentDidMount方法被調用之后才會獲取焦點哦(componentDidMount是React組件被渲染之后React主動回調的方法) 3.5.defaultValue??string?給文本輸入設置一個默認初始值。 3.6.editablebool??設置文本框是否可以編輯?默認值為true,可以進行編輯 3.7.keyboardType??鍵盤類型(可選參數:"default", 'email-address','numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation','url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')?該用來選擇默認彈出鍵盤的類型例如我們甚至numeric就是彈出數字鍵盤。鑒于平臺的原因如下的值是所有平臺都可以進行通用的 * default * numeric????????????數字鍵盤 * email-address??郵箱地址 3.8.maxLength? number??可以限制文本輸入框最大的輸入字符長度 3.9.multiline bool??設置可以輸入多行文字，默認為false(表示無論文本輸入多少，都是單行顯示) 3.10.onBlur??function?監聽方法，文本框失去焦點回調方法 3.11.onChange function?監聽方法,文本框內容發生改變回調方法 3.12.onChangeText? function監聽方法，文本框內容發生改變回調方法，該方法會進行傳遞文本內容 3.13.onEndEditing??function監聽方法，當文本結束文本輸入回調方法 3.14.onFocus? function?監聽方法??文本框獲取到焦點回調方法 3.15.onLayout? function監聽方法??組價布局發生變化的時候調用，調用方法參數為?{x,y,width,height} 3.16.onSubmitEditing function監聽方法，當編輯提交的時候回調方法。不過如果multiline={true}的時候，該屬性就不生效 3.17.placeholer string?當文本輸入框還沒有任何輸入的時候，默認顯示信息，當有輸入的時候該值會被清除 3.18.placeholerTextColor??string?設置默認信息顏色(placeholer) 3.19.secureTextEntry? bool?設置是否為密碼安全輸入框?，默認為false 3.20.style?風格屬性??可以參考Text組件風格 3.21.value??string?輸入框中的內容值 以上是一些Android，iOS平臺通用的屬性，下面根據官網的文檔，我這邊組要講解一下適用于Android平臺的屬性方法 ????????? 3.22.numberOfLinesnumber設置文本輸入框行數，該需要首先設置multiline為true,設置TextInput為多行文本。 ????????? 3.23.textAlign?設置文本橫向布局方式?可選參數('start', 'center', 'end') ????????? 3.24.textAlignVertical?設置文本垂直方向布局方式?可選參數('top', 'center', 'bottom') ????????? 3.25.underlineColorAndroid??設置文本輸入框下劃線的顏色 # (四)TextInput實戰-仿照QQ登錄界面 ????????下面我們來仿照QQ登錄界面的效果，進行布局一下，具體實現代碼如下: ~~~ /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, Image, View, TextInput, } from'react-native'; class TestInputextends Component { render() { return ( <Viewstyle={{backgroundColor:'#f4f4f4',flex:1}}> <Image style={styles.style_image} source={require('./img/app_icon.png')}/> <TextInput style={styles.style_user_input} placeholder='QQ號/手機號/郵箱' numberOfLines={1} autoFocus={true} underlineColorAndroid={'transparent'} textAlign='center' /> <View style={{height:1,backgroundColor:'#f4f4f4'}} /> <TextInput style={styles.style_pwd_input} placeholder='密碼' numberOfLines={1} underlineColorAndroid={'transparent'} secureTextEntry={true} textAlign='center' /> <View style={styles.style_view_commit} > <Text style={{color:'#fff'}}> 登錄 </Text> </View> <Viewstyle={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}> <Textstyle={styles.style_view_unlogin}> 無法登錄? </Text> <Textstyle={styles.style_view_register}> 新用戶 </Text> </View> </View> ); } } const styles =StyleSheet.create({ style_image:{ borderRadius:35, height:70, width:70, marginTop:40, alignSelf:'center', }, style_user_input:{ backgroundColor:'#fff', marginTop:10, height:35, }, style_pwd_input:{ backgroundColor:'#fff', height:35, }, style_view_commit:{ marginTop:15, marginLeft:10, marginRight:10, backgroundColor:'#63B8FF', height:35, borderRadius:5, justifyContent: 'center', alignItems: 'center', }, style_view_unlogin:{ fontSize:12, color:'#63B8FF', marginLeft:10, }, style_view_register:{ fontSize:12, color:'#63B8FF', marginRight:10, alignItems:'flex-end', flex:1, flexDirection:'row', textAlign:'right', } }); AppRegistry.registerComponent('TestInput',() => TestInput); ~~~ 運行效果如下:  # (五)最后總結 ??????????今天我們主要給大家介紹TextInput組件，以及通過一個QQ登錄界面具體實例把之前的View,Text,Image組件的基本使用串聯了一下。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)