最近有人問過這個問題,貌似好沒有出現(xiàn)很好的解決辦法,寫一篇文章分享一下自己之前遇到并處理的過程,希望能給大家一些幫助。
項目中遇到過這么一種情況的bug:
當前頁面存在三個textInput疫向,頁面內(nèi)做了點擊空白區(qū)域鍵盤會自動收回的處理。
正常情況:選中某一個textInput豪嚎,輸入內(nèi)容搔驼,然后點擊空白區(qū)域贩汉,鍵盤收回覆获,然后再次選中下一個textInput干跛,鍵盤再次彈起库车,然后輸入內(nèi)容歹嘹,點擊空白鍵盤收回僚饭,依次往下泳挥。必須逐個選中琅关,取消選中,才能正常哗伯。
在實際使用的情況中荒揣,用戶往往會在第一個textInput輸入內(nèi)容,然后直接選中第二個textInput焊刹,輸入內(nèi)容系任,然后再選擇下一個,所有內(nèi)容輸入完畢以后虐块,點擊空白區(qū)域俩滥,需要鍵盤收回。這個時候bug就出現(xiàn)了贺奠。你會發(fā)現(xiàn)此時鍵盤無法收回霜旧。多次測試以后,發(fā)現(xiàn)必須選擇讓鍵盤彈起的那個輸入框以后儡率,點擊空白區(qū)域挂据,鍵盤才能正常收回。
網(wǎng)上查詢了很多資料并沒有找到解決辦法儿普,只好是翻源碼崎逃。
在react-native/Libraries/Components/TextInput目錄下。在TextInputState中找到對應的方法眉孩,blueTextInput方法个绍。需要傳入一個_currentlyFocusedID才能收回鍵盤。
通過在源碼中加log的方式障贸,一步步確定错森,這個id值是在選中某一TextInput時吟宦,鍵盤彈起的時候根據(jù)TextInput對應創(chuàng)建的,出現(xiàn)問題的根本原因在于涩维,當?shù)谝粋€鍵盤沒有收回而直接選中第二個textInput的時候殃姓,因為鍵盤對象存在,所以不會重新執(zhí)行鍵盤彈出的方法瓦阐,導致選中另外一個TextInput的時候蜗侈,當前鍵盤的_currentlyFocusedID為null,所以點擊空白區(qū)域需要收回鍵盤的時候睡蟋,在blurTextInput方法里傳入的textFieldID為null踏幻,導致無法收回鍵盤。
現(xiàn)在bug 的原因找到了戳杀,怎么修復這個bug该面。
第一種夭苗,簡單粗暴,改源碼隔缀,無腦的把判定條件刪除掉题造,但是這可能導致更多未知的bug。不選擇猾瘸。
第二種界赔,自己管理好鍵盤對應的id。
下面介紹第二種解決辦法牵触。
第一步淮悼,在頁面文件中,導入TextInputState文件揽思。
第二步敛惊,TextInput選中的方法里,通過一個變量绰更,記錄一下當前鍵盤的currentlyFocusedID瞧挤。
第三步,在需要鍵盤收回的地方儡湾,調(diào)用focusTextInput方法特恬,將currentlyFocusedID傳入TextInputState中,然后徐钠,調(diào)用TextInputState中的blurTextInput方法癌刽,收回鍵盤。
第四步显拜,自行測試效果。
以上是對不能收回鍵盤問題的分析和處理方法的介紹爹袁,如果有更好的解決辦法远荠,歡迎分享。