今天我們講的是使用頻率比較高的TextInput組件。
對于TextInput組件大家肯定不陌生，QQ,微信，各個App都有登陸注冊模塊，需要大家輸入信息，這就用到了TextInput！

TextInput組件

TextInput是一個允許用戶在應(yīng)用中通過鍵盤輸入文本的基本組件，它有許多特性可以自己定制，今天我們就來講解一下!

First

我們先來創(chuàng)建一個inputText.js文件

import React, {
  Component
} from 'react';
import {
View,
StyleSheet,
Image,
TextInput,
Dimensions,
Text
} from 'react-native';
let ScreenHeight =  Dimensions.get('window').height - 64;
import NavBar from '../navbar';
export default class TextInputView extends Component {
 render() {
    return (
    <View>
     <NavBar name='TextInput' back={()=>{this.props.navigator.pop()}}/>
     <View style={styles.container}>
        <View style={{flex:1,justifyContent:'center'}}>
            <TextInput style={[styles.baseStyle,styles.first]}>
            </TextInput>
        </View>
        <View style={{flex:1,justifyContent:'center'}}>
            <TextInput style={[styles.baseStyle,styles.second]}>
            </TextInput>
        </View>
        <View style={{flex:1,justifyContent:'center'}}>
            <TextInput style={[styles.baseStyle,styles.third]}>
            </TextInput>
        </View>

        <TextInput style={[styles.baseStyle,styles.fourth]}>{/**/}
        </TextInput>
    </View>
  </View>
 )
}
}

const styles = StyleSheet.create({
container: {
 height: ScreenHeight,
 backgroundColor: 'gainsboro',
 alignItems: 'center',
 justifyContent: 'center',
 },
 baseStyle: {
  height: 40,
  backgroundColor: 'white',
  width: 200
},
 first: {

 },
 second: {
    
 },
 third: {

 },
 fourth: {

 },
});

這樣，我們就創(chuàng)建了一個這樣的頁面

Second

可能有人會問了，為什么最后一個位置不對呢？
都設(shè)置居中了啊，所以大家要注意，一般來說，設(shè)定TextInput的位置的時候，都是配合View來使用的！

咱們先看一下大寫切換屬性autoCapitalize，

characters: 所有的字符都切換為大寫，就是說，你輸入框里的字符全都是大寫。  
words: 每個單詞的第一個字符。比如說I Am Demon404!  
sentences: 每句話的第一個字符切換為大寫，這個是默認(rèn)的。  
none: 不自動切換任何字符為大寫。    

autoCorrect={false}||autoCorrect={true},這個屬性是拼寫自動糾正提示的屬性。
autoFocus，也是一個bool值類型的屬性，它的作用是在組件生命周期的componentDidMount后獲得焦點。
defaultValue：(string)設(shè)置輸入框的初始值，當(dāng)開始輸入的時候值可以改變。
editable:(bool)設(shè)置是否可以編輯。
keyboardType：設(shè)置鍵盤類型，("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')這些是它的類型
maxLength:(int)限制文字輸入的長度。
multiline:(bool)設(shè)置是否可以輸入多行文字,
onBlur:(fun)當(dāng)文本框失去焦點的時候觸發(fā)該方法
onChange:(fun)當(dāng)文本框文字改變的時候觸發(fā)該方法
onChangeText:(fun)文本框文字改變的時候調(diào)用，會把輸入的文字傳遞
onEndEditing (fun) 當(dāng)文本輸入結(jié)束后調(diào)用此回調(diào)函數(shù)。
onFocus (fun)當(dāng)文本框獲得焦點的時候調(diào)用此回調(diào)函數(shù)。
onLayout (fun)當(dāng)組件掛載或者布局變化的時候調(diào)用，參數(shù)為{x, y, width, height}。
placeholder:(str)如果沒有文字輸入的話會顯示此占位字符串
placeholderTextColor:(str)更改placeholer占位字符串的文字顏色
secureTextEntry (bool)設(shè)置是否加密，常用于密碼輸入
selectionColor:(str)設(shè)置輸入框高亮?xí)r的顏色
安卓輸入框默認(rèn)的有下劃線，可以設(shè)置這個屬性來隱藏
underlineColorAndroid='transparent'

Final

基本上常用的屬性都介紹完了，那么它的樣式呢？
TextInput集成了Text的所有樣式，如果有不明白的，可以看一下我的第一篇文章