背景
當(dāng)我們?cè)趹?yīng)用中包含輸入框,而當(dāng)點(diǎn)擊輸入框彈出鍵盤時(shí),如果輸入框的位置比較靠下的話,會(huì)導(dǎo)致鍵盤遮擋住輸入框
方案
https://reactnative.cn/docs/keyboardavoidingview,RN內(nèi)置的keyboardavoidingview組件正是為解決這個(gè)問題而生,只需要參考文檔說明,把自己的內(nèi)容用組件包裹起來(lái)即可
問題
我用的iOS測(cè)試,使用官網(wǎng)demo能生效,但是在我自己的case里,點(diǎn)擊彈出鍵盤后,問題沒有解決!
解決
- 仔細(xì)分析對(duì)比代碼樣式的差異,注釋無(wú)關(guān)代碼,沒有發(fā)現(xiàn)不妥!
- 反復(fù)研究demo,原來(lái)demo代碼的效果大概就是把一個(gè)flex:1的容器壓縮了一下,也就是說,這個(gè)組件做的事情,是鍵盤彈出以后,告知RN端高度變小。而在我的case里,因?yàn)閮?nèi)容高度是固定的,容器高度變小,對(duì)內(nèi)部元素的排版不會(huì)有影響!
- 在keyboardavoidingview內(nèi)部包裹一個(gè)scrollview組件,這樣彈出鍵盤以后,scrollview就自動(dòng)滾動(dòng)上去了!
結(jié)論
- 如果內(nèi)容比較多,一定要用scrollview, 不過如果本來(lái)就有flatlist或者secitionlist,則沒有必要,因?yàn)楸緛?lái)就繼承了scrollview;
- 內(nèi)容少的話(不夠1屏),這時(shí)候不添加scrollview容器也可以
優(yōu)化
在ios端,點(diǎn)擊空白或者鍵盤的確定按鈕,不能關(guān)閉鍵盤。這時(shí)候,我們需要引入RN自帶的Keyboard和TouchableWithoutFeedback,用TouchableWithoutFeedback包裹整個(gè)可視區(qū)域,并且點(diǎn)擊的時(shí)候,執(zhí)行Keyboard.dismiss()方法,這樣點(diǎn)擊任何一個(gè)空白區(qū)域,都會(huì)導(dǎo)致鍵盤被關(guān)閉!
也有另外一個(gè)問題,我本來(lái)在底部,嵌入了一個(gè)絕對(duì)定位的圖片,彈出鍵盤以后,這個(gè)圖片就和輸入框重疊了,影響美觀。我現(xiàn)在做的解決方案是,引入RN自帶的Animated,當(dāng)彈出鍵盤時(shí),讓他通過這個(gè)動(dòng)畫移動(dòng)到可視區(qū)域下方,而當(dāng)鍵盤顯示的時(shí)候,再移動(dòng)回來(lái)。鍵盤移動(dòng)/隱藏的監(jiān)聽可通過Keyboard監(jiān)聽keyboardDidShow和keyboardDidHide來(lái)實(shí)現(xiàn)