1.TextInput介紹
TextInput是一個允許用戶通過鍵盤輸入文本的的組件，該組件提供了多種配置的屬性，如自動完成、自動大小寫等等。
注意：通過onChangeText從TextInput中獲取用戶錄入的文本是目前唯一的方法。
2.屬性
- autoCapitalize: PropTypes.oneOf(['none','sentences','words','characters',])
控制TextInput是否要自動的切換爲大寫。‘none’:不自動切換；‘sentences’:每句話的每一個字符(默認)；‘word’：每個單詞的第一個 字符；‘characters’:所有的字符。
- autoCorrect: PropTypes.bool,如果爲false,自動關閉拼寫修正，默認true。
- autoFocus: PropTypes.bool,如果爲true，在componentDidMount後會獲得焦點，默認false.
- blurOnSubmit: PropTypes.bool,如果爲true，文本框會在提交的時候失焦。對於單行輸入框默認值爲true，多行則爲false。 注意：對於多行輸入框來說，如果將blurOnSubmit設爲true，則在按下回車鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。
- defaultValue: PropTypes.node, 提供一個文本框中的初始值。當用戶開始輸入的時候，值就可以改變。
在一些簡單的使用情形下，如果你不想用監聽消息然後更新value屬性的方法來保持屬性和狀態同步的時候，就可以用defaultValue來代替。
- value: PropTypes.string,文本框中的文字內容。
TextInput是一個受約束的(Controlled)的組件，意味着如果提供了value屬性，原生值會被強制與value屬性保持一致。在大部分情況下這都工作的很好，
不過有些情況下會導致一些閃爍現象——一個常見的原因就是通過不改變value來阻止用戶進行編輯。
如果你希望阻止用戶輸入，可以考慮設置editable={false}；如果你是希望限制輸入的長度，可以考慮設置maxLength屬性，這兩個屬性都不會導致閃爍。
- editable: PropTypes.bool,如果爲false，文本框是不可編輯的。默認值爲true。
- keyboardType: PropTypes.oneOf([
// Cross-platform
'default',//默認
'email-address',//email地址
'numeric',//數字鍵盤
'phone-pad',//手機
// iOS-only
'ascii-capable',
'numbers-and-punctuation',
'url',
'number-pad',
'name-phone-pad',
'decimal-pad',
'twitter',
'web-search',
])決定彈出的何種軟鍵盤的，如numeric（純數字鍵盤）。
- placeholder: PropTypes.node,如果沒有任何文字輸入，會顯示此字符串。
- placeholderTextColor: ColorPropType,佔位字符串顯示的文字顏色。
- maxLength: PropTypes.number,限制文本框中最多的字符數。使用這個屬性而不用JS邏輯去實現，可以避免閃爍的現象。
- multiline: PropTypes.bool,如果爲true，文本框中可以輸入多行文字。默認值爲false。
- onBlur: PropTypes.func,當文本框失去焦點的時候調用此回調函數。
- onChange: PropTypes.func,當文本框內容變化時調用此回調函數。
- onChangeText: PropTypes.func,當文本框內容變化時調用此回調函數。改變後的文字內容會作爲參數傳遞。
- onEndEditing: PropTypes.func,當文本輸入結束後調用此回調函數。
- onFocus: PropTypes.func,當文本框獲得焦點的時候調用此回調函數。
- onLayout: PropTypes.func,當組件掛載或者佈局變化的時候調用，參數爲{x, y, width, height}。
- onScroll: PropTypes.func,在內容滾動時持續調用，傳回參數的格式形如{ nativeEvent: { contentOffset: { x, y } } }。
也可能包含其他和滾動事件相關的參數，但是在Android上，出於性能考慮，不會提供contentSize參數。
- onSelectionChange: PropTypes.func,長按選擇文本時，選擇範圍變化時調用此函數，傳回參數的格式
形如{ nativeEvent: { selection: { start, end } } }。
- onSubmitEditing: PropTypes.func,此回調函數當軟鍵盤的確定/提交按鈕被按下的時候調用此函數。如果multiline={true}，此屬性不可用。
- secureTextEntry: PropTypes.bool,如果爲true，文本框會遮住之前輸入的文字，這樣類似密碼之類的敏感文字可以更加安全。默認值爲false。
- selectTextOnFocus: PropTypes.bool,如果爲true，當獲得焦點的時候，所有的文字都會被選中。
- selection: PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number, }),- selectionColor: ColorPropType,設置輸入框高亮時的顏色（在iOS上還包括光標）。
- returnKeyType: PropTypes.oneOf([
// Cross-platform
'done',
'go',
'next',
'search',
'send',
// Android-only
'none',
'previous',
// iOS-only
'default',
'emergency-call',
'google',
'join',
'route',
'yahoo',
]),
/*@platform android*/
- disableFullscreenUI: PropTypes.bool. - inlineImageLeft: PropTypes.string.
- inlineImagePadding: PropTypes.number.
- returnKeyLabel: PropTypes.string.
- textBreakStrategy: React.PropTypes.oneOf(['simple', 'highQuality', 'balanced']),.
- numberOfLines: PropTypes.number. - underlineColorAndroid: ColorPropType.
/*@platform ios*/
- spellCheck: PropTypes.bool,
- clearButtonMode: PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]),是否要在文本框右側顯示“清除”按鈕。
- clearTextOnFocus: PropTypes.bool,如果爲true，每次開始輸入的時候都會清除文本框的內容。
- enablesReturnKeyAutomatically: PropTypes.bool,如果爲true，鍵盤會在文本框內沒有文字的時候禁用確認按鈕。默認值爲false。
- dataDetectorTypes: PropTypes.oneOfType([ PropTypes.oneOf(DataDetectorTypes), PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ]),
- keyboardAppearance: PropTypes.oneOf([指定鍵盤的顏色。 'default', 'light', 'dark', ]),
- onKeyPress: PropTypes.func,當一個鍵被按下的時候調用此回調。傳遞給回調函數的參數爲{ nativeEvent: { key: keyValue } }，
其中keyValue即爲被按下的鍵。會在onChange之前調用。- selectionState: PropTypes.instanceOf(DocumentSelectionState),可以控制一個文檔中哪段文字被選中的狀態。
3.實例
index.android.js和index.ios.js中代碼：
import './luancher' luancher.js代碼
import React, { Component } from 'react'; import { AppRegistry, } from 'react-native';
import Root from './inputText/root' AppRegistry.registerComponent('ImageDemo', () => Root);
root.js代碼：
import React,{Component} from 'react' import { StyleSheet, Text, View, TextInput, Dimensions, } from 'react-native' const {width,height} = Dimensions.get('window') export default class Root extends Component{ constructor(props){ super(props) this.state = { inputText:'' } } render(){ return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="請輸入文本信息"//佔位符 returnKeyType='search'//回車鍵的類型 maxLength={50}//限制文本框的最多字符數 numberOfLines={1}//顯示的行數 underlineColorAndroid='#FD6363'//android平臺，下劃線 autoCapitalize='words'//自動轉換大寫 keyboardType='default'//軟鍵盤的類型 secureTextEntry={true}//true文本框會遮住之前輸入的文本 selectTextOnFocus={true}//true獲得焦點時，文本全選中 onChangeText={(text) => this.setState({inputText:text})}//文本內容發生變化時，執行回調函數，改變後的文本內容會作爲參數傳遞 > </TextInput> <Text style={styles.text}> 輸出的文本：{this.state.inputText} </Text> </View> ) } } const styles = StyleSheet.create({ container:{ flex:1, }, input:{ height:40, margin:10, }, text:{ marginLeft:10, } })