一行代碼教你解決Scrollview和TextInput焦點獲取問題
前言
業(yè)務(wù)開發(fā)中搜索框和列表的組合頁面應(yīng)該是比較常見的場景，那么有什么坑呢？
最近在開發(fā)過程就遇到了一個問題，輸入搜索關(guān)鍵詞查詢接口返回數(shù)據(jù)后，點擊列表項并返回上個頁面時，發(fā)現(xiàn)需要兩次點擊，納尼？頁面示意圖如下
通過日志以及邏輯分析發(fā)現(xiàn)兩個問題：
- 1.第一次點擊列表項無法觸發(fā)onPress點擊事件
- 2.第一次點擊其實是使輸入框失去焦點并隱藏鍵盤
知道問題在哪就有解決問題的方向了：點擊列表項使輸入框自動失去焦點，并觸發(fā)onPress點擊事件。
嘗試方案
- 1.通過點擊事件添加Keyboard.dismiss(),并使用輸入框ref調(diào)用blur()方法
- 2.通過使用Scrollview包裹整個頁面，添加keyboardShouldPersistTaps={'handled'}設(shè)置項（網(wǎng)上方案）
方案結(jié)果：
- 沒有作用
- 沒有效果，且上面的搜索框會一起滾動
最終方案
通過在技術(shù)群溝通，有位群友提出方案
scrollview 容器加 keyboardDismissMode="on-drag" 實踐后，并未解決此問題
最終通過嘗試在列表Flatlist中添加屬性keyboardShouldPersistTaps={'always'}成功解決
示例代碼如下：
// 自定義輸入框
<CustomizeSearchBar
value={searchText}
actionPress={onActionPress}
placeholder='請輸入昵稱/地址/姓名/手機號查詢' onSearchChange={onSearchChange}/>
<FlatList
keyboardShouldPersistTaps={'always'}
style={{flex: 1}}
data={addressList}
renderItem={renderItem}
ListEmptyComponent={<ListEmpty type={2} />}
keyExtractor={(item) => item.id}
/>
復(fù)制代碼附RN中文網(wǎng)對keyboardShouldPersistTaps的解釋說明：
最后
寫了Android和Flutter混合開發(fā)一年多，又開始寫RN了，就想一個圓一樣。
小伙伴們，你們現(xiàn)在是做RN,Flutter,原生，還是轉(zhuǎn)行了？
以上就是一行代碼教你解決Scrollview和TextInput焦點獲取問題的詳細(xì)內(nèi)容，更多關(guān)于Scrollview TextInput焦點獲取的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android實現(xiàn)軟件列表的點擊啟動另外一個程序功能【附demo源碼下載】
這篇文章主要介紹了Android實現(xiàn)軟件列表的點擊啟動另外一個程序功能,涉及Android針對應(yīng)用程序的讀取、加載、啟動等操作相關(guān)技巧,需要的朋友可以參考下2016-07-07
最近測試測試APP的一個功能,發(fā)現(xiàn)點擊頁面上的按鈕后,CPU占有率比之前的版本要高,所以本文給大家介紹了如何解決Android 高CPU占用率的問題,需要的朋友可以參考下2023-09-09
Android P實現(xiàn)靜默安裝的方法示例(官方Demo)
這篇文章主要介紹了Android P實現(xiàn)靜默安裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了flutter實現(xiàn)仿boss直聘功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
詳解如何在Android Studio中添加RecyclerView-v7支持包
本篇文章主要介紹了詳解如何在Android Studio中添加RecyclerView-v7支持包，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
Fragment的出現(xiàn)，如微信的額主界面包含多個Fragment，使得微信功能更加簡潔明了。這篇文章給大家講解Android Fragment用法，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細(xì)剖析了Android開發(fā)中線程池源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Android微信右滑退出功能的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-01-01
Android開發(fā)教程之獲取系統(tǒng)輸入法高度的正確姿勢
這篇文章主要給大家介紹了關(guān)于Android開發(fā)教程之獲取系統(tǒng)輸入法高度的正確姿勢，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Android具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
Android ListView實現(xiàn)簡單列表功能
這篇文章主要為大家詳細(xì)介紹了Android ListView實現(xiàn)簡單列表功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08