React Native控件之TextInput組件介紹以及實(shí)際登錄界面實(shí)現(xiàn)

（一）前言

這一篇文章講解一下文本輸入框TextInput組件使用講解以及模仿實(shí)現(xiàn)一下貴州銀行登錄界面效果。

TextInput組件允許用戶在應(yīng)用中通過(guò)鍵盤進(jìn)行輸入文本信息。并且該組件還提供了多種配置屬性：自動(dòng)拼寫修復(fù)、自動(dòng)大小寫切換、占位默認(rèn)字符設(shè)置以及多種不同類型的鍵盤切換（數(shù)字鍵盤與字母鍵盤等之間的切換）。

（二）基本使用

TextInput組件和前面講到的Image或者 Text組件差不多，用起來(lái)都很simple。我們直接在應(yīng)用中添加一個(gè)TextInput組件，然后給該組件添加相關(guān)屬性（例如：邊框顏色、粗細(xì)、背景、默認(rèn)值）以及監(jiān)聽方法（例如：剛輸入回調(diào)、輸入完成回調(diào)、焦點(diǎn)變化等事件）?？匆幌鹿俜嚼樱?/p>

   <View style={styles.TextInputContainer}>
                  <TextInput style={{borderWidth:1,borderColor:'red',height:40}}
                      onChangeText={ (text) => this.setState({text}) }
                      value={this.state.text}
                  />
               </View>


TextInputContainer:{
    marginTop:20,
    marginLeft:10,
    marginRight:10,
    backgroundColor:'white'
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

這個(gè)例子直接定義了TextInput組件，同時(shí)設(shè)置組件的風(fēng)格、高度、邊框粗細(xì)以及邊框顏色。而且，我們監(jiān)聽了TextInput的onChangeText事件來(lái)獲取用戶輸入信息。還有其他監(jiān)聽事件，例如onSubmitEditing（提交編輯）、onFoucs（輸入框獲取焦點(diǎn)的時(shí)候調(diào)用）等相關(guān)的監(jiān)聽方法。

接下來(lái)我們進(jìn)一步將例子加深：創(chuàng)建三個(gè)TextInput，同時(shí)每個(gè)TextInput都添加了默認(rèn)值，第一個(gè)TextInput組件設(shè)置高度40，邊框粗細(xì)和邊框的顏色，而且可以輸入多行信息。第二個(gè)TextInput設(shè)置左右額外邊距以及自動(dòng)獲取焦點(diǎn)。第三個(gè)TextInput設(shè)置不可輸入狀態(tài)。直接上代碼：

 <View style={styles.TextInputContainer}>
                  <TextInput style={{height:40,borderColor:'green',borderWidth:1,marginTop:5}}
                       multiline={true}
                       defaultValue='默認(rèn)信息1'
                  />
                  <TextInput style={{height:40,borderColor:'green',borderWidth:1,marginTop:5}}
                       autoFocus={true}
                       defaultValue='默認(rèn)信息2'
                  />
                  <TextInput style={{height:40,borderColor:'green',borderWidth:1,marginTop:5}}      
                       editable={false}
                       defaultValue='默認(rèn)信息3'
                  />
               </View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

運(yùn)行效果如下圖：

（三）屬性方法

（四）方法（Methods）

1.isFocused()

返回值是boolean，判斷當(dāng)前TextInput組件當(dāng)前是否獲得焦點(diǎn)

2.clear()

移除所有輸入的文本從TextInput組件。

（五）例子