react native 无侵入 彻底解决键盘遮挡问题

无论原生还是h5以及ReactNative 中对于键盘的遮挡问题一直是个难题

而即便对于一些出名的第三方库，在对于自定义inputView和RN中都有异常情况

RN中键盘遮挡问题也是个热门，google一下就会发现都在查找解决方法

例如：

• 放在 scrollView 如何自动顶上去，还要考虑偏移量问题
• RN中监控键盘的位置变化
• 自定义一个 scrollView，所有需要防遮挡的，都必须使用这个自定义 scrollView
• 自定义一个 InputText，所有需要防遮挡的，都必须使用这个自定义 InputText
• 还有ReactNative官方的 AvoidKeyboardView ，这个其实很不稳定。为什么？因为它真的不稳定

其实在我看来也是个很简单的问题，因为大部分人都进入误区中，无法看透本质

• 1. 防键盘为什么必须在RN中解决呢
• 1. 自定义防遮挡的 InputText scrollView 写起来很麻烦，用起来也麻烦，为什么还要写呢？
• 1. 为什么不能从原生解决呢？
• 1. 因为原生的键盘防遮挡库都没办法单独的控制每一个 InputText
• 1. 即便原生的库非常强大，但是RN中怎么使用呢？
• 1. 怎么才能做到 RN 中，无代码侵入，无项目侵入？

解决办法

首先说明一下：安卓是不需要考虑这个问题的，因为原生自带防遮挡效果

1. 引入原生库

引入原生库，在原生控制，才能做到

• 稳定（原生对键盘和 UITextField 的监控和控制不是比RN更稳定吗）
• RN无丝毫代码侵入、项目侵入
• 可以单独控制每一个输入框

请参考我的另外一篇文章

iOS键盘防键盘遮挡库 KKInputAvoidKeyBoard 每个 UITextField 都可以自己控制

2. 原理说明

首先说明：

FaceBook 推出了 ReactNative 的技术，把前端开发引入了另一个方向，支持跨平台开发

技术只是技术，代码只是代码，人是活的

没有看源码的程序员不是好程序员，没有修改过源码的程序员更不是好程序员（在有需求或者源码出问题或不完善的情况下）

看过 KKInputAvoidKeyBoard 的应该都知道，可以对每一个输入框做键盘防遮挡，并且用法超级简单，最重要的是，已经上线。并且我们公司做各种信息录入，有大量的输入框，自定义键盘，自定义 inputView 等，均已测试无问题。

isAvoidKeyBoardEnable 来控制是否防遮挡

avoidKeyBoardDistance 来控制输入框底部到键盘的距离

so easy

3. 现在来说如何兼容 ReactNative

修改 RN 源码

另外多说一句，建议所有项目都 pod 引入 ReactNative

• React.podspec 依赖 KKInputAvoidKeyBoard

  s.subspec "RCTText" do |ss|
    ss.dependency  "KKInputAvoidKeyBoard"
    ss.dependency             "React/Core"
    ss.source_files         = "Libraries/Text/*.{h,m}"
  end

8925C181121053238C9327038B67F376.jpg

*

8829859A835B595CF14A6ED91139B88E.jpg

• 当然不用我说也知道

在两个 OC 文件中

#import <KKInputAvoidKeyBoard/KKInputAvoidKeyBoard-Swift.h>

4. 简单解决问题，早点下班

如此便给 RN 中所有的 InputText 增加了以下两个属性和功能

RN中无代码侵入，项目无侵入

/* 键盘遮挡后，是否自动调整，防止键盘遮挡 */ isAvoidKeyBoardEnable={true}

/* 键盘顶起后，底部距离键盘的距离 */ avoidKeyBoardDistance={20}

<InputText isAvoidKeyBoardEnable={true} avoidKeyBoardDistance={100}/>