react-native-FuncInput

综述

本控件是一个页面控件，简单来说，类似于微信或 QQ 的聊天页面，主要解决了

• 自动换行，
• 键盘遮挡，
• 高度自适应

这三个问题。。当然，也可以用来做社交类应用中的回复等功能。 对外暴露出两大快的区域内容，供用户自定义，分别是

• 输入框上半部分的内容区域
• 下班部分的功能区域。

Demo 中做了一个仿微信聊天的页面来说明控件的使用。中间灰色的区域是控件中主要实现的内容。

从实现的效果上来看，安卓的效果整体较 ios要好。原因会在本文的后半部提到。

效果图

控件的特点

• android 和 iOS 下均做了适配，同时也适配 iPhone X，解决键盘遮挡的问题
• 根据有/无导航条，自适应页面
• 如上示意图，内容展示区与功能输入区不作干预，用户可自定义使用方法。
• 兼容不同键盘，iOS兼容第三方键盘输入，切换键盘高度时，输入框会自适应。
• 输入超过单行时，在输入框最大高度范围内，输入框高度及页面滚动会自适应。
• 功能输入区高度和键盘高度不一致，当在两个区域切换时，可以很好的适配。

Props

已知 bug 及不足

已知 bug

• android

  • 安卓环境下，当输入达到多行，且超过了最大高度时，输入框和光标不会自动定位到最后一个字符。除非用户手动滚动到底，否则输入的内容在底部并不会自己展示。

    查过react native官方的文档和issues，这是安卓目前尚无法解决的问题。还未找出有什么好的办法来规避。

• iOS

  • 使用第三方输入法（这里以搜狗为例）情况下，在 app之间切换，返回时会产生一些输入框遮挡的情况。再做一次 app 间切换又正常。系统原生的输入法不会有此问题。

    调试中发现搜狗输入法在唤起键盘时，会产生两次的高度回调（原生键盘不会）。以搜狗输入法默认的高度为例，两次高度分别是252和282。在 app 切换回来的时候，键盘唤起的高度又会被执行一次，此时会产生这个问题。

  • 低概率情况，使用第三方输入法（这里以搜狗为例）情况下，当点击内容区域或唤起功能区域（+按钮）时，键盘不会消失，需要用户手动点击消失按钮。目前在打包为bundle情况下尚未发现。

不足 —— 主要针对 iOS

对比微信的聊天页面，本组件还有许多不足。 鉴于 IM 类组件对性能的要求较高，本身不建议使用纯RN来做。具体的说明在文章后半部分会提到。这里只对几个缺点作一个简要说明。

• 页面的偏移滚动一定是在键盘唤醒后的。这是 RN本身的时序导致的。因为调用顺序是，原生的键盘出来后，JS才收到原生发来的广播消息。

• 输入换行时，输入区域的底部会出现短暂的空白，这是由于时序设计上导致的。必须获取到换行事件回调中的高度变化，才能去控制整体 scrollview 的滚动，在时间差上会导致短暂的空白。

• 发送按钮。 微信的键盘上提供了一个发送按钮，这样做的好处是不会占用正常的输入区域的宽度。RN目前提供的方案，TextInput组件提供了几个props:

  • returnKeyType —— 键盘上的Done类型，可以设置成send
  • onSubmitEditting —— 此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。
  • multiline —— 多行模式 —— 我们这里肯定是设置为 true
  • blurOnSubmit —— 如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。

  根据上面几点的说明，如果我将blurOnSubmit，那么可以使用虚拟键盘上的发送按钮并传入点击事件方法给他，但是这样一来，光标会失焦，键盘会消失。这显然不是我想要的。但是不这样做，就无法获取到点击事件。

• 尚未提供功能接口，方便用户自定义功能键的摆放位置、样式，以及是否需要发送按钮。

• 目前还未完全设计好，

下面是设计思路

设计思路

解决的问题

如文首提到的，键盘遮挡一直是 RN中比较容易遇到的棘手问题。且这问题主要针对 iOS。因为安卓的键盘弹出，会在当前输入框底下自动插入对应的键盘，也包括高度自适应。这就不需要开发者做太多额外的高度适应和滚动问题。

本控件拿到了的两个接口 wrappedContentCmp 和 wrappedFunctionCmp 传来的组件内容后，包裹在一个大的ScrollView中，当发生换行事件，state变换引起的键盘占位区域高度变化时，做对应的高度滚动。

流程图

联系方式

有任何问题，欢迎添加本人 QQ 250547732