ReactNative 之 TextInput 组件介绍

i蒹葭从风
转载请注明原创出处，谢谢！
如果读完觉得有收获的话，欢迎点赞加关注

最近公司的App开始用ReactNative 一下简称RN重构了，首先我们是拿首页开刀的，其实之前有一个优惠券列表页面已经用ReactNative实现了，不过访问量实在是太小了，看不出RN和Hybrid App 的优缺点，所以这次用了首页来重构。
其中首页包含一下几部分，搜索框，广告banner，品类，我附近，营销广告位，人气榜，还有未截图的猜你喜欢模块。

首页

这篇文章，先来介绍textinput的使用，就拿搜索框来举例吧。
通过官方文档可以看出TextInput 的定义，官方文档上说明：TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。下面枚举一些属性。

autoCapitalize

enum('none', 'sentences', 'words', 'characters')
控制TextInput 是否要自动将特定字符切换为大写。

autoCorrect bool

如果为false，会关闭拼写自动修正，默认为true

blurOnSubmit bool

如果为true，文本框会在提交的时候，失去焦点，对于单行输入框默认值为true，多行则为false。

注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。

defaultValue string

提供一个文本框的初始值，当用户开始输入的时候，值就开始改变

editable bool

如果为false，则文本框不可编辑，默认为true

keyboardType enum

枚举类型
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

限制文本框最多字符数。

multiline bool

如果为true文本框可以输入多行文字，默认为false

onBlur function

当文本失去焦点的时候，触发此回调函数

onChange function

当文本框发生变化的时候，调用此函数

onChangeText function

当文本框内容变化时，调用此函数，改变后的文字内容会作为内容参数传递
仔细看看和onChange 之间的区别

onEndEditing function

当文本输入结束后调用此函数

onFocus function

当文本获得焦点的时候，调用此函数

onLayout function

当组件挂载或者布局发生变化的时候调用

onSubmitEditing

此回调函数当软键盘的回车键按下的时候触发。如果multiline=true的时候此属性不可用

placeholder

如果没有任何文字输入，会显示此字符

placeholderTextColor

占位符显示文字的颜色

returnKeyType enum

enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')
决定“回车”按钮显示的内容
一下几个跨平台兼容
done
go
next
search
send

enablesReturnKeyAutomatically

如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。

好了说了以上那么多的属性，还有2个静态方法

isFocused ()

clear()

这个两个静态方法的使用很简单，获取textinput组件，然后直接使用。比如

要是获取TextInput 组件可以用this.refs.TextInput.isFocused(),或者要清除输入框内容的话，就可以用this.refs.TextInput.clear()就可以把内容清除掉。

失去焦点

接下来说一下，如果使TextInput 组件失去焦点，其实RN不像web开发一样，web开发，点击input 框外面就会把input 框失去焦点，而RN则不会触发失去焦点的事件。那么怎么才能使TextInput 框失去焦点呢，其实RN提供了一个Keyboard 组件，
这个组件也提供了一个静态方法Keyboard.dismiss();就可以使键盘隐藏，同时失去焦点，是不是很简单。

输入框内容闪动

看一下这个例子



onChangeText(text){
    this.setSate({
        value:text
    });
}

这个简单的伪代码，相信大家会这样写。这样写在不经过http请求的时候，会没什么问题，如果你的state要经过http请求，比如搜索联想词，那么你会发现你输入的内容会闪动，因为，你输入的a，在经过render之后，TextInput 组件又重现渲染了一次，所以value这个会闪动，尤其是网络情况不好的状态下，更为明显。那么怎么解决这个问题呢，那就是TextInput不写value这个属性，如果不写这个属性，而又想拿到输入的值，有很多种办法，其一是放进state，其二是把onChangeText的时候，保存起来，这样就不会出现闪动的情况了。

目前先大致了解一下TextInput这个组件，先挖个坑，下一篇文字会介绍一下，自动联想词这个功能怎么实现。

如果读完觉得有收获的话，欢迎点赞加关注
您的认可是我写作的最大动力