react-native TextInput 聚焦情況點擊事件需要點擊兩次才可以觸發(fā)

keyboardShouldPersistTaps={'handled'}

keyboardShouldPersistTaps
如果當前界面有軟鍵盤,那么點擊scrollview后是否收起鍵盤,取決于本屬性的設置。(譯注:很多人反應TextInput無法自動失去焦點/需要點擊多次切換到其他組件等等問題,其關鍵都是需要將TextInput放到ScrollView中再設置本屬性)

'never' (默認值),點擊TextInput以外的子組件會使當前的軟鍵盤收起。此時子元素不會收到點擊事件。
'always',鍵盤不會自動收起,ScrollView也不會捕捉點擊事件,但子組件可以捕獲。
'handled',當點擊事件被子組件捕獲時,鍵盤不會自動收起。這樣切換TextInput時鍵盤可以保持狀態(tài)。多數帶有TextInput的情況下你應該選擇此項。
但是我反反復復試驗之后沒有效果。

解決方案:網友的解決方案是對的,錯的是我這是一個城市列表,用<SectionList/>寫的,而我的搜索框是<SectionList/>的頭部組件ListHeaderComponent 寫的,所以我應該是在<SectionList/>上加keyboardShouldPersistTaps={'handled'};而不是在TextInput外面再裹一層;

同理:如果是<ScrollView/>內多個TextInput切換也是會點擊2次才回去焦點,處理方法同上;

最后,目的實現了,但是鍵盤沒有收回去,這時我們只好手動觸發(fā)鍵盤事件了,也很簡單;

先引入‘dismissKeyboard’模塊,然后再事件觸發(fā)dismissKeyboard()方法;搞定;

const dismissKeyboard = require('dismissKeyboard');
 
clearSearch(){
    dismissKeyboard()
}

備注:
在無法點擊的組件上添加 keyboardShouldPersistTaps={'handled'}
而不是在TextInput上添加

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容