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
會在當前目錄下生成 Podfile
和 Podfile.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 資料夾下,重新啟動發現問題解決了。