1. 程式人生 > >React Native 解決 iOS 上鍵盤遮擋 TextInput 問題

React Native 解決 iOS 上鍵盤遮擋 TextInput 問題

我們在用 React Native 開發應用的時候,總會碰到讓使用者輸入某些內容的需求和功能,那麼也總會有當我們的輸入框在螢幕下半部分並且 focus 這個輸入框時,鍵盤彈出並會遮擋在其上,使使用者在輸入時完全不知道自己在輸什麼。

IQKeyboardManager 這個第三方庫通過了解,是目前在 github 上 star 數最高的解決問題的第三方外掛。

它描述自己的外掛具有如下有點:

” Codeless, Zero Line Of Code ” - 不需要任何插入程式碼
” Works Automatically ” - 完全自動化
” No More UIScrollView ” - 不需要任何 UIScrollView 元件
” No More Subclasses ” - 不需要子類
” No More Manual Work ” - 不需要配置性的工作
” No More #imports ” - 不需要 import

在使用它之前,我查到一款管理第三方庫的管理工具 - cocoaPod。安裝過程不太複雜,但是比較好時間,但是需要注意的時候,要替換國外資源,使用淘寶的國內映象,你可以從這篇文章中學會如何安裝

gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

假設你已經安裝成功 cocoaPod ,首先進入到 React Native 的專案的根目錄,然後進入 根目錄/ios 目錄,在該資料夾下有專案的 ios 的 xcode 工程檔案,執行命令:

pod init

會在當前目錄下生成 PodfilePodfile.lock

檔案,然後通過 vim 開啟 Podfile

# Uncomment the next line to define a global platform for your project
# ios 平臺版本
platform :ios, '9.0'    

target 'xxx' do 
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for xxx
   # pod 第三方外掛
  pod "IQKeyboardManager"
end

之後 :wq 儲存退出,執行:

pod install

等待安裝完成。

至此,第三方外掛已經下載並依賴到了開發的專案上,但是當我們在 XCode 上進行編譯除錯的時候,會報如下這種錯誤:

library not found for -lIQKeyboardManager

通過報錯的資訊發現,是因為 XCode 在編譯的時候,沒有找到 IQKeyboardManager 的 Library,並且開啟 Frameworks 資料夾發現裡面的 libPods-xxx.a 是紅色的,因此可能是 IQKeyboardManager 的 Library 沒有進行關聯,但是在 根目錄/ios/Pods 中並咩有發現任何的關於 IQKeyboardManager 的 Library,由於本人對 IOS 開發剛剛起步,因此抱著試試看的想法將 Pod.xcodeproj 檔案拖放到 Libraries 資料夾下,重新啟動發現問題解決了。