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" 来清除下划线