React-native中多個textInput鍵盤不能收回的問題的原因分析及解決辦法

最近有人問過這個問題,貌似好沒有出現(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才能收回鍵盤。


state中記錄TextInput的id值
TextInput選中時執(zhí)行的方法勺像,將TextInput的id值傳給鍵盤


鍵盤彈起的方法
鍵盤收回的方法

通過在源碼中加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文件揽思。

導入TextInputState

第二步敛惊,TextInput選中的方法里,通過一個變量绰更,記錄一下當前鍵盤的currentlyFocusedID瞧挤。


通過變量記錄currentlyFocusedID

第三步,在需要鍵盤收回的地方儡湾,調(diào)用focusTextInput方法特恬,將currentlyFocusedID傳入TextInputState中,然后徐钠,調(diào)用TextInputState中的blurTextInput方法癌刽,收回鍵盤。


傳入currentlyFocusedID尝丐,收回鍵盤

第四步显拜,自行測試效果。

以上是對不能收回鍵盤問題的分析和處理方法的介紹爹袁,如果有更好的解決辦法远荠,歡迎分享。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末失息,一起剝皮案震驚了整個濱河市譬淳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌盹兢,老刑警劉巖邻梆,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異绎秒,居然都是意外死亡浦妄,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來剂娄,“玉大人窘问,你說我怎么就攤上這事∫酥洌” “怎么了惠赫?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長故黑。 經(jīng)常有香客問我儿咱,道長,這世上最難降的妖魔是什么场晶? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任混埠,我火速辦了婚禮,結(jié)果婚禮上诗轻,老公的妹妹穿的比我還像新娘钳宪。我一直安慰自己,他們只是感情好扳炬,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布吏颖。 她就那樣靜靜地躺著,像睡著了一般恨樟。 火紅的嫁衣襯著肌膚如雪半醉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天劝术,我揣著相機與錄音缩多,去河邊找鬼。 笑死养晋,一個胖子當著我的面吹牛衬吆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播绳泉,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼逊抡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了圈纺?” 一聲冷哼從身側(cè)響起秦忿,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤麦射,失蹤者是張志新(化名)和其女友劉穎蛾娶,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潜秋,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡蛔琅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了峻呛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罗售。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡辜窑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出寨躁,到底是詐尸還是另有隱情穆碎,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布职恳,位于F島的核電站所禀,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏放钦。R本人自食惡果不足惜色徘,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望操禀。 院中可真熱鬧褂策,春花似錦、人聲如沸颓屑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揪惦。三九已至扬蕊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間丹擎,已是汗流浹背尾抑。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蒂培,地道東北人再愈。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像护戳,于是被迫代替她去往敵國和親翎冲。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容