（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

今天我們講解的是React Native基礎系列之TextInput的講解，如果想學習更多的開發知識或者移動開發文章，歡迎大家關注我的微信公眾號：非著名程式設計師（smart_android）。

TextInput 是一個允許使用者輸入文字的基礎元件。它有一個onChangeText的屬性，該屬性接受一個函式，每當文字輸入發生變化時，此函式就會被呼叫。它還有一個onSubmitEditing的屬性，當文字輸入完被提交的時候呼叫。

官網例子

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '?').join(' ')}
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
 

效果圖如下：

這個例子實現的功能就是當我們在文字輸入框裡輸入一個單詞時，該單詞就會換成?，如果輸入的是一句話或者很多單詞，就會實時動態的把一句話拆成以一個一個的單詞，然後替換成?。比如："Hello there Bob"將會被翻譯為"???"。

解釋

如果你們不懂js的話，可能看著有點困難，所以學React Native的時候，大家最好先去看看js，至少得懂一些。

• 邏輯與 aa && bb 這裡的意思是邏輯與的操作，如果邏輯與是true，則返回前面的aa,如果是false，則返回bb。這回懂了 word && '?' 這個的意思了吧？
• [].map() 基本用法跟forEach方法類似，迴圈遍歷陣列,然後返回新的陣列
• join() arrayObject.join(separator)，返回一個字串。該字串是通過把 arrayObject 的每個元素轉換為字串，然後把這些字串連線起來，在兩個元素之間插入 separator 字串而生成的。

再說一遍，以後就不解釋了，不懂js語法的自行去學習。

屬性方法

• autoCapitalize: 控制輸入框輸入時字元的大寫，引數有：'none', 'sentences', 'words', 'characters'。
  • none:不自動切換任何字元成大寫
  • sentences:預設句話的首字母變成大寫
  • words:每個單詞的首字母變成大寫
  • characters:每個字母全部變成大寫
• placeholder：佔位符，預設顯示資訊，在輸入前顯示的文字內容。相當於android中的hint，當有輸入的內容時被清除。
• placeholdertTextColor: 佔位符文字顏色。
• value： 文字輸入框的預設值。
• password： 如果為true ，則是密碼輸入框，文字顯示為＊＊＊。
• multiline： 如果為true ， 則是多行輸入。
• editable： 如果為false ， 文字框不可輸入。其預設值事true。
• autoFocus: 如果為true， 將自動聚焦。
• clearButtonMode : 列舉型別，可選值有never，while－enditing , unless-editing,always。用於顯示清除按鈕。
• maxLength: 輸入文字框能夠輸入的最長字元數。
• keyboardType：輸入框的鍵盤型別(可選引數:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 該功能用來選擇預設彈出鍵盤的型別例如我們甚至numeric就是彈出數字鍵盤。
• onChangeText: 當文字輸入框的內容發生變化時，呼叫該函式。onChangeText接收一個文字的引數物件。
• onChange: 當文字變化時，呼叫該函式。
• onEndEditing: 當結束編輯時，呼叫該函式。
• onBlur: 失去焦點觸發事件，回撥該函式。
• onFocus: 獲得焦點觸發該監聽事件。
• onSubmitEditing: 當結束編輯後，點選鍵盤的提交按鈕出發該事件。但是當multiline={true}的時候，該屬性就會失效。
• secureTextEntry：設定是否為密碼安全輸入框 ，預設為false。
• textAlign：設定文字橫向佈局方式 可選引數('start', 'center', 'end')
• textAlignVertical：設定文字垂直方向佈局方式 可選引數('top', 'center', 'bottom')
• underlineColorAndroid：設定文字輸入框下劃線的顏色
• autoCorrect：設定拼寫自動修正功能 預設為開啟(true)
• onLayout：當元件佈局發生變化的時候呼叫
• numberOfLines：number設定文字輸入框行數，使用該功能需要先設定multiline為true,設定TextInput為多行文字。

TextInput實踐

效果圖

廢話不多說，結合我們之前學的一些基礎，再加上TextInput的知識，我們現在練習一個demo，鞏固一下以前的知識點。效果圖如下：

demo程式碼

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

class TextInputDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.top_half_view}>
          <View style={styles.title_view}>
             <Text style={styles.title_text}>
               郵箱登入
            </Text>
          </View>

          <TextInput 
              style={styles.textinput}
              placeholder='郵箱'
              numberOfLines={1}
              autoFocus={true}
              underlineColorAndroid={'#e1e1e1'}
          />
           <TextInput 
              style={styles.textinput}
              placeholder='密碼'
              numberOfLines={1}
              secureTextEntry={true}
              underlineColorAndroid={'#e1e1e1'}
          />
          <View style={{backgroundColor:'#ffffff',flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
             <View style={styles.style_view_register}>
              <Text style={{color:'#5ac4ef'}}>
                註冊
              </Text>
             </View>

             <View style={styles.style_view_login}>
              <Text style={{color:'white'}}>
                登入
              </Text>
             </View>
          </View>
          <Text style={styles.bottom_text}>
            忘了密碼?點此找回
          </Text>
        </View>
        <View style={styles.bottom_half_view}>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
  title_text:{
    color:'white',
    fontSize:22,
    marginLeft:20,
    textAlign:'center'
  },
  top_half_view:{
    flex: 1.3,
    backgroundColor: 'white',
  },
  bottom_half_view:{
    flex: 1,
    backgroundColor: '#eeeeee',
  },
  textinput: {
    backgroundColor:'#fff',
    marginTop:5,
    marginLeft:20,
    marginRight:20,
    textAlign:'left',
  },
  style_view_login:{  
      flex:1,
      marginTop:20,
      marginLeft:20,
      marginRight:20,
      backgroundColor:'#27b5ee',
      height:35,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_register:{  
      flex:1,
      marginTop:20,
      marginLeft:20,
      marginRight:20,
      borderColor:'#5ac4ef',
      borderWidth: 1,
      height:35,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  bottom_text:{
    color:'#27b5ee',
    fontSize:14,
    marginTop:10,
    marginLeft:20,
    textAlign:'left',
    fontWeight:'bold'
  },
});

AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);