摘要:傳給回調函數的里,包含一個觸摸事件參數。官網的版文檔中,和組件中都有屬性,這個屬性接收一個回調函數,函數原型是,在組件和的組件的時候觸發該事件,傳給回調函數的里,參數,其中的屬性為該組件的。
1、問題 問題場景:
由于手機屏幕高度不定,做表單頁面時,外層通常加上ScrollView組件,使其能夠適應屏幕進行滾動。業務需要里面放置多個TextInput組件。
問題描述:出現的問題是,首次點擊focus TextInput,鍵盤彈出,然后想要點擊連續focus TextInput時,結果沒有focus,而是鍵盤收起,需要再次點擊TextInput 進行focus。
結果就是每次切換輸入框都需要點擊兩次。問題影響:
這個問題使得app的體驗差到了極點,飽受用戶吐槽。
2、解決方案 2.1 整體思路保持鍵盤一直展開,然后點擊的時候,能夠判斷點擊的組件是否為TextInput,如果是則鍵盤不收起,否則鍵盤收起。
2.2 解決步驟 1) 在ScrollView中如何保持鍵盤一直展開閱讀ScrollView的源碼可以發現,它有一個屬性keyboardShouldPersistTaps,默認值為false,表示只要點擊當前focus組件外的地方,都會引起鍵盤的收起。
這個是不能連續focus TextInput的原因,引起鍵盤收起后,還捕獲了點擊事件,使得focus失效。 所以我們應該把ScrollView的這個屬性設置為 true,讓鍵盤一直保持彈出狀態。
它還有一個屬性keyboardDismissMode,是枚舉類型: 代表鍵盤在drag的時候是否收起
"none" 是默認值,代表鍵盤一直展開
"on-drag" 代表 ScrollView拖動的時候 鍵盤收起 在android下無效
"interactive" 翻譯過來是互動的時候鍵盤收起
但是發現在android和ios下也沒什么效果
嘗試著用這個屬性去收起鍵盤,但是效果不好,并且不兼容android。
最終我們對ScrollView的操作是加上屬性 keyboardShouldPersistTaps = true
如何判斷點擊到的組件是TextInput ?
2)如何獲取觸摸事件的ID閱讀View的原文我們可以發現屬性 onStartShouldSetResponderCapture,這個屬性接收一個回調函數,函數原型是 function(evt): bool,在觸摸事件開始(touchDown)的時候,RN 容器組件會回調此函數,詢問組件是否要劫持事件響應者設置,自己接收事件處理,如果返回 true,表示需要劫持,如果返回false,表示不劫持。
傳給回調函數的event里,包含一個觸摸事件參數nativeEvent。nativeEvent 的詳細內容如下:
identifier:觸摸的 ID,一般對應手指,在多點觸控的時候,用來區分是哪個手指的觸摸事件;
locationX 和 locationY:觸摸點相對組件的位置;
pageX 和 pageY:觸摸點相對于屏幕的位置;
timestamp:當前觸摸的事件的時間戳,可以用來進行滑動計算;
target:接收當前觸摸事件的組件 ID;
changedTouches:evt數組,從上次回調上報的觸摸事件,到這次上報之間的所有事件數組。因為用戶觸摸過程中,會產生大量事件,有時候可能沒有及時上報,系統用這種方式批量上報;
touches:evt 數組,多點觸摸的時候,包含當前所有觸摸點的事件。
這里我們用到的是target屬性,它就代表點擊的組件ID。
React-Native官網的0.28版文檔中,View和TextInput組件中都有屬性onLayout,這個屬性接收一個回調函數,函數原型是 function(evt),在mount組件和layout的組件的時候觸發該事件,傳給回調函數的event里,參數nativeEvent,其中的target屬性為該組件的ID。 所以可以在TextInput組件layout時,將他們的ID存放在數組中,然后判斷觸發事件的組件ID是否在數組中,來確定該組件時候為TextInput。 React-Native官網的0.28版文檔中,View和TextInput組件中都有屬性onLayout,這個屬性接收一個回調函數,函數原型是 function(evt),在mount組件和layout的組件的時候觸發該事件,傳給回調函數的event里,參數nativeEvent,其中的target屬性為該組件的ID。 所以可以在TextInput組件layout時,將他們的ID存放在數組中,然后判斷觸發事件的組件ID是否在數組。 0.28版本之前 TextInput組件沒有onLayout屬性,所以在0.28版本中TextInput沒有onLayout屬性,hack的方法是用View包裹TextInput,然后給View加onLayout屬性,
獲取到的是View的組件ID,調試發現,View里面的TextInput的ID是外層View的ID+1,通過這種方法獲取的TextInput的組件ID,在0.29以后的版本中,可以直接給TextInput加onLayout屬性了。
4)如何控制鍵盤的收起react-native 中有dismissKeyboard模塊,用于設置鍵盤的收起,直接調用該模塊方法,即可收起鍵盤。2.3 關鍵代碼
const dismissKeyboard = require("dismissKeyboard"); const inputComponents = []; _onStartShouldSetResponderCapture (event) { let target = event.nativeEvent.target; if(!inputComponents.includes(target)) { dismissKeyboard(); } return false; } _inputOnLayout(event){ inputComponents.push(event.nativeEvent.target); }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91131.html
摘要:,已過期,請使用代替。解決方案安卓增加屬性并設置為官方解釋當圖片實際尺寸和容器樣式尺寸不一致時,決定以怎樣的策略來調整圖片的尺寸。 本文均為RN開發過程中遇到的問題、坑點的分析及解決方案,各問題點之間無關聯,希望能幫助讀者少走彎路,持續更新中... (2019年3月29日更新) 原文鏈接:http://www.kovli.com/2018/06/... 作者:Kovli - 如何在原生...
摘要:尷尬,哈哈哈,而且也看到只支持安卓。最后解決方法是用一個包裹著左圖像和一個輸入框,把輸入框的設置為透明色,然后效果圖的下劃線應該是有來繪制。下面貼一下源碼視圖代碼用戶名密碼樣式代碼 需要完成的登錄界面輸入框是這樣的 showImg(https://segmentfault.com/img/bVbjR8W?w=253&h=129); 當時覺得應該是直接用textInput來寫,查看官方文...
閱讀 2789·2021-11-24 09:39
閱讀 2548·2021-11-23 09:51
閱讀 1802·2021-11-17 09:33
閱讀 1736·2021-10-22 09:54
閱讀 1870·2021-08-16 11:00
閱讀 3420·2019-08-30 15:53
閱讀 1732·2019-08-30 13:19
閱讀 2901·2019-08-30 12:49