欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一行代碼教你解決Scrollview和TextInput焦點(diǎn)獲取問題

 更新時(shí)間：2022年12月21日 16:02:11   作者：wayne214  
這篇文章主要為大家介紹了一行代碼教你解決Scrollview和TextInput焦點(diǎn)獲取問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

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

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

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

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

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

嘗試方案

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

方案結(jié)果：

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

最終方案

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

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

最終通過嘗試在列表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的解釋說明：

最后

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

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

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

相關(guān)文章

最新評(píng)論