React Native知識3-TextInput組件，react3-textinput

React Native知識3-TextInput組件，react3-textinput

TextInput是一個允許使用者在應用中通過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、佔位文字，以及多種不同的鍵盤類型（如純數字鍵台）等等。它的樣式屬性跟Text是一樣；

一：屬性

1：autoCapitalize enum('none', 'sentences', 'words', 'characters') 

控制TextInput是否要自動將特定字元切換為大寫：

characters: 所有的字元。

words: 每個單詞的第一個字元。

sentences: 每句話的第一個字元（預設）。

none: 不自動切換任何字元為大寫。

2：autoCorrect bool 

如果為false，會關閉拼字自動修正。預設值是true。

3：autoFocus bool 

如果為true，在componentDidMount後會獲得焦點。預設值為false。

4：blurOnSubmit bool 

如果為true，文字框會在提交的時候失焦。對於單行輸入框預設值為true，多行則為false。注意：對於多行輸入框來說，如果將blurOnSubmit設為true，則在按下斷行符號鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。

5：defaultValue string 

提供一個文字框中的初始值。當使用者開始輸入的時候，值就可以改變。

在一些簡單的使用情形下，如果你不想用監聽訊息然後更新value屬性的方法來保持屬性和狀態同步的時候，就可以用defaultValue來代替。

6：editable bool 

如果為false，文字框是不可編輯的。預設值為true。

7：keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 

決定彈出的何種軟鍵盤的，譬如numeric（純數字鍵台）。

這些值在所有平台都可用：

default

numeric

email-address

maxLength number 

限制文字框中最多的字元數。使用這個屬性而不用JS邏輯去實現，可以避免閃爍的現象。

8：multiline bool 

如果為true，文字框中可以輸入多行文字。預設值為false。

9：onBlur function 

當文字框失去焦點的時候調用此回呼函數。

10：onChange function 

當文字框內容變化時調用此回呼函數。

11：onChangeText function 

當文字框內容變化時調用此回呼函數。改變後的文字內容會作為參數傳遞。

12：onEndEditing function 

當文本輸入結束後調用此回呼函數。

13：onFocus function 

當文字框獲得焦點的時候調用此回呼函數。

14：onLayout function  

當組件掛載或者布局變化的時候調用，參數為{x, y, width, height}。

15：onSubmitEditing function  

此回呼函數當軟鍵盤的確定/提交按鈕被按下的時候調用此函數。如果multiline={true}，此屬性不可用。

16：placeholder string 

如果沒有任何文字輸入，會顯示此字串。

17：placeholderTextColor string 

佔位字串顯示的文字顏色。

18：secureTextEntry bool 

如果為true，文字框會遮住之前輸入的文字，這樣類似密碼之類的敏感文字可以更加安全。預設值為false。

19：selectTextOnFocus bool 

如果為true，當獲得焦點的時候，所有的文字都會被選中。

20：selectionColor string 

設定輸入框高亮時的顏色（在iOS上還包括游標）

21：value string 

文字框中的文字內容。

TextInput是一個受約束的(Controlled)的組件，意味著如果提供了value屬性，原生值會被強制與value屬性保持一致。在大部分情況下這都工作的很好，不過有些情況下會導致一些閃爍現象——一個常見的原因就是通過不改變value來阻止使用者進行編輯。如果你希望阻止使用者輸入，可以考慮設定editable={false}；如果你是希望限制輸入的長度，可以考慮設定maxLength屬性，這兩個屬性都不會導致閃爍。

22：iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') 

是否要在文字框右側顯示“清除”按鈕。

23：（ios）clearTextOnFocus bool 

如果為true，每次開始輸入的時候都會清除文字框的內容。

24：（ios）enablesReturnKeyAutomatically bool 

如果為true，鍵盤會在文字框內沒有文字的時候禁用確認按鈕。預設值為false。

25：（ios）keyboardAppearance enum('default', 'light', 'dark')  

指定鍵盤的顏色。

26：（ios）onKeyPress function 

當一個鍵被按下的時候調用此回調。被按下的鍵會作為參數傳遞給回呼函數。會在onChange之前調用。

27：（ios）returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') 

決定“確定”按鈕顯示的內容。

28：（ios）selectionState DocumentSelectionState 

參見DocumentSelectionState.js，可以控制一個文檔中哪段文字被選中的狀態。

29：（android）numberOfLines number 

設定輸入框的行數。當multiline設定為true時使用它，可以佔據對應的行數。

30：（android）underlineColorAndroid string 

文字框的底線顏色(譯註：如果要去掉文字框的邊框，請將此屬性設為透明transparent)。

 

二：方法

1：isFocused(): boolean 

傳回值表明當前輸入框是否獲得了焦點。 

2：clear() 

清空輸入框的內容。

 

三：執行個體代碼

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  AlertIOS,  Text,  View,  TextInput,  Alert} from 'react-native';class ReactNativeProject extends Component {   myOnChangeText(newText) {          console.log('inputed text:' + newText);          alert(newText);      }  render() {    return (      <View style={styles.container}>      <TextInput keyboardType="numeric" placeholder="請輸入使用者名稱" style={styles.inputTextTopStyle} clearTextOnFocus={true}/>      <TextInput keyboardType="default" style={styles.inputTextCenterStyle} returnKeyType="next" maxLength={5} defaultValue="預設值" clearButtonMode="always"/>      <TextInput autoFocus={true} defaultValue="自動擷取焦點" style={{marginTop:30,height:30,borderWidth:1,borderColor:'red'}} onChangeText={this.myOnChangeText}/>      <TextInput multiline={true} style={styles.inputTextBottomStyle} defaultValue="多行文本輸入框"/>      <TextInput secureTextEntry={true} style={styles.inputTextCenterStyle} defaultValue="123456" editable={false}></TextInput>      <TextInput style={styles.inputTextCenterStyle} defaultValue="失焦點響應事件" onBlur={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}></TextInput>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    marginTop:64  },  inputTextTopStyle:{    height:20,    borderWidth:1,    borderColor:'blue',    marginLeft:15,    marginRight:15  },  inputTextCenterStyle:  {    marginTop:10,    marginLeft:15,    borderColor:'red',    borderWidth:1,    height:25  },  inputTextBottomStyle:{    marginTop:20,    marginLeft:15,    borderColor:'red',    borderWidth:1,    height:45  }});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

：