react-native TextInput 使用

一個簡單的例子：

<View style={styles.inputContainer}>
 <TextInput
    ref="input"
    placeholder={locked ? '表格已被鎖定，你不能編輯' : '只能閱讀'}
    style={styles.input}
    editable={false}
    placeholderTextColor="#c6c7c9"
    underlineColorAndroid="transparent"
    />
</View>

基本屬性

1. keyboardType

keyboardType用於設定彈出軟鍵盤的型別。它的取值為範圍為： enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') ，其中default、numeric、email-address和phone-pad是跨平臺。

2.multiline

如果值為真，文字輸入可以輸入多行，預設值為假。

3.password

如果值為真，文字輸入框就成為一個密碼區域，預設值為假。

4.placeholder

在文字輸入之前提示使用者文字框功能，也就是佔位文字。

5.placeholderTextColor

佔位字串的文字顏色。

6. autoCapitalize

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

• none：不自動使用任何東西
• sentences：每個句子的首字母（預設）
• words：每一個單詞的首字母
• characters：所有字元

7.autoCorrect

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

8.autoFocus

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

9.editable

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

10. returnKeyType

決定鍵盤右下角返回鍵的作用。

• default
• go
• google
• join
• next
• route
• search
• send
• yahoo
• done
• emergency-call

11. onChange

當文字框內容變化時呼叫此回撥函式，監聽輸入的值。

12. onChangeText

當文字框內容變化時呼叫此回撥函式。改變後的文字內容會作為引數傳遞。

13. onFocus

當文字框獲得焦點的時候呼叫此回撥函式。

14. onBlur

當文字框失去焦點的時候呼叫此回撥函式。

_onBlur = ({ nativeEvent: { text } }) => {
  console.log(text)
}

15. onEndEditing

安卓中需加 underlineColorAndroid="transparent" 來清除下劃線