轉載請標明出處：

(一)前言

      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 

      今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置的請檢視之前的相關文章。

剛建立的React Native技術交流3群(496508742),React Native技術交流4群(458982758)，請不要重複加群！歡迎各位大牛,React Native技術愛好者加入交流!同時部落格左側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!

         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)或者底下進行回覆一下。

       關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博，可以獲得更多精彩內容