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}/>