react-native TextInput 使用

一个简单的例子:


 

基本属性

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

你可能感兴趣的:(react-native TextInput 使用)