前言

業(yè)務(wù)開(kāi)發(fā)中搜索框和列表的組合頁(yè)面應(yīng)該是比較常見(jiàn)的場(chǎng)景，那么有什么坑呢？

最近在開(kāi)發(fā)過(guò)程就遇到了一個(gè)問(wèn)題，輸入搜索關(guān)鍵詞查詢接口返回?cái)?shù)據(jù)后，點(diǎn)擊列表項(xiàng)并返回上個(gè)頁(yè)面時(shí)，發(fā)現(xiàn)需要兩次點(diǎn)擊，納尼？頁(yè)面示意圖如下

通過(guò)日志以及邏輯分析發(fā)現(xiàn)兩個(gè)問(wèn)題：

• 1.第一次點(diǎn)擊列表項(xiàng)無(wú)法觸發(fā)onPress點(diǎn)擊事件
• 2.第一次點(diǎn)擊其實(shí)是使輸入框失去焦點(diǎn)并隱藏鍵盤(pán)

知道問(wèn)題在哪就有解決問(wèn)題的方向了：點(diǎn)擊列表項(xiàng)使輸入框自動(dòng)失去焦點(diǎn)，并觸發(fā)onPress點(diǎn)擊事件。

嘗試方案

• 1.通過(guò)點(diǎn)擊事件添加Keyboard.dismiss(),并使用輸入框ref調(diào)用blur()方法
• 2.通過(guò)使用Scrollview包裹整個(gè)頁(yè)面，添加keyboardShouldPersistTaps={'handled'}設(shè)置項(xiàng)（網(wǎng)上方案）

方案結(jié)果：

• 沒(méi)有作用
• 沒(méi)有效果，且上面的搜索框會(huì)一起滾動(dòng)

最終方案

通過(guò)在技術(shù)群溝通，有位群友提出方案

scrollview 容器加 keyboardDismissMode="on-drag" 實(shí)踐后，并未解決此問(wèn)題

最終通過(guò)嘗試在列表Flatlist中添加屬性keyboardShouldPersistTaps={'always'}成功解決

示例代碼如下：

// 自定義輸入框
<CustomizeSearchBar 
      value={searchText}
      actionPress={onActionPress}
      placeholder='請(qǐng)輸入昵稱/地址/姓名/手機(jī)號(hào)查詢' onSearchChange={onSearchChange}/>
<FlatList
  keyboardShouldPersistTaps={'always'}
  style={{flex: 1}}
  data={addressList}
  renderItem={renderItem}
  ListEmptyComponent={<ListEmpty type={2} />}
  keyExtractor={(item) => item.id}
/>
復(fù)制代碼

附RN中文網(wǎng)對(duì)keyboardShouldPersistTaps的解釋說(shuō)明：

最后

寫(xiě)了Android和Flutter混合開(kāi)發(fā)一年多，又開(kāi)始寫(xiě)RN了，就想一個(gè)圓一樣。

小伙伴們，你們現(xiàn)在是做RN,Flutter,原生，還是轉(zhuǎn)行了？

以上就是一行代碼教你解決Scrollview和TextInput焦點(diǎn)獲取問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于Scrollview TextInput焦點(diǎn)獲取的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論