轉載請標明出處:
[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)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)