React Native之Android 和 iOS在點選觸發事件時的相容性處理
最近,我在專案中遇到了一個bug,bug的情況描述大致如下:
當點選按鈕A時,彈出彈層,彈層有一個按鈕B,邏輯是:當點選按鈕B時,首先彈層消失,緊接著開始調取C介面流程。在Android上正確顯示,但是iOS中只是彈層消失,並沒有調取C介面事件。
對於這種情況,我之前開發過程中確實測試過simulator模擬器,iOS的模擬器顯示是正常的,另外現在測試說Android也是好的,可以證明邏輯是完全沒有問題。問題應該出在iOS與Android原始相容性的問題。經我有過H5移動端web頁面的開發經驗,我覺得有可能原因出在iOS機型的點選也存在300ms的延遲導致。因為iOS需要延遲300ms來響應和判斷是否使用者點選是單次點選還是雙擊。由此,以下程式碼,即可解決問題。
注意:setTimeout是非同步的,所以setTimeout中的函式裡的this並不能表示當前的this,如果用ES6就可以完美的解決this的問題。
原始碼奉上:
showBtnModalOrNo() { var _this = this; var isShow = this.state.modalVisible; if (isShow) { Animated.timing( _this.state.chaAnim, {toValue: 0, duration: 150} ).start(()=> { Animated.timing( _this.state.modalAnimatedHeight, {toValue: -400, duration: 300} ).start(()=> { _this.CMModal.hideModal(); _this.setState({ modalVisible: false, }); setTimeout(function(){ _this.props.checkFaceRecognition(); },1000); }); }) } else { _this.setState({ modalVisible: true, }) _this.CMModal.showModal(function () { Animated.timing( _this.state.modalAnimatedHeight, {toValue: 0, duration: 300} ).start(()=> { Animated.timing( _this.state.chaAnim, {toValue: 1, duration: 150} ).start(); }); }); } }
核心在於:
var _this=this;
setTimeout(function(){
_this.props.checkFaceRecognition();
},1000);
相關推薦
React Native之Android 和 iOS在點選觸發事件時的相容性處理
最近,我在專案中遇到了一個bug,bug的情況描述大致如下: 當點選按鈕A時,彈出彈層,彈層有一個按鈕B,邏輯是:當點選按鈕B時,首先彈層消失,緊接著開始調取C介面流程。在Android上正確顯示,但是iOS中只是彈層消失,並沒有調取C介面事件。 對於這種情況,我之前開發過
React native 之android的圖示和啟動圖片
哎哎呀呀,上篇說到了react native的IOS的圖示和啟動圖片的設定,其實最主要的是尺寸!相應的尺寸設定好了以後就不會報錯了!ok~這篇說的是React native的android的圖示和啟動頁面!!!!!1.圖示:其實android的圖示設定很簡單,一般情況下只需要替換就可以了(當然你也可以不去替換
React Native之Android原生通過DeviceEventEmitter傳送訊息給js
1 問題 Android原生向js發訊息,並且可以攜帶資料 2 實現原理 Android原生可以使用RCTEventEmitter來註冊事件,然後這裡需要指定事件的名字,然後在js那端進行監聽同樣事件的名字監聽,就可以收到訊息得到資料 Android註冊關
react-native 之android 配置gif圖片的使用----------小白的天堂
React-native顯示動態圖片(gif)的配置 突然心血來潮,想把專案中的loading效果換成動態圖片的樣式,這樣會好看一些不會那麼單調。然後開始了我的踩坑之路。。。。 首先,檢視官方網站(react-native中文網),然後選擇對應自己的版本號的文件 我的是0.50
React Native 之Android混合開發,及遇到的各種坑
最近自己也是剛在學習React Native的知識,在學習到React Native 嵌入到原生應用的時候,感覺遇到了各種坑,這裡做一下記錄。若有說得不對的地方,謝謝大家糾正。 React Native嵌入到原生應用的教程在其官方指導文件裡也有,但是感覺很多注意點沒講到,現
React-Native之Android:原生介面與React介面的相互呼叫
這裡原生介面是指用佈局檔案實現或Java程式碼實現view的Activity,React介面是指用ReactJS實現的介面的Activity。 從某種角度看,React只是充當了Android裡的view層,因此原生介面與React介面的相互呼叫及資料傳遞同原生介面之間的互
react-native 之 state 和 props 以及 redux 和 react-redux
Component 中 state 和 props 的區別; 元件Component中狀態state和屬性props的區別 state props state是在元件內部定義的一個特殊物件{},既起到元件內部的一種快取作用,也具備由於
react native之原生和RN的互動
前言:前端時間隨著自己的學習和研究,也寫了幾篇關於react native的文章,雖然都是比較簡的,但是都是根據自己的效果來做的流程,所以還是比較實用的,可以避免很多的坑。這篇react native
React Native之Android 5.0以下系統WebView訪問https頁面變成空白頁
在我們的React Native專案中,需要開發一個tab頁面專門配置三方h5連結,供使用者瀏覽。自動化測試:Android 5.0以下系統此tab頁面為空白頁面。看效果: 而我們去檢視這個三方的
React Native TouchableOpacity 封裝 防止快速點選 多次響應
不耽誤幹活,直接上程式碼,功能比較簡單,具體延時時間自己定,還需要啥功能自己改進一下。 import React,{ Component } from "react"; import {Touch
React-Native 之Android應用開發踩坑紀 (一)————windows環境下配置
歡迎轉載,轉載註明出處: 我不只是看客 自從在公司中被老大安利了移動開發的未來 React-Native之後開始關注相關,想嘗試相關app開發。正好畢業準備畢設,腦子一熱就選擇了RN來開發一款app……題目上交就不能改了,現在好後悔。。。但硬著頭皮上吧 ,廢
React Native ListView的Item設定點選事件時null is not an object
先貼下程式碼: <ListView contentContainerStyle = {styles.list}
React Native之學習ListView的單選以及記錄資料
var mSelectWhat = -1; var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); //當且僅當cell中的任意兩行不相等時才重新渲染\ export default class Desig
Android學習——ClickableSpan點選連結事件 改超連結顏色
mTextView = (TextView)findViewById(R.id.myTextView); //建立一個 SpannableString物件 msp = new SpannableString("字型測試字型大小一半兩倍前景色背景色正常粗體斜體粗斜體下劃
百度地圖marker標記即行車路線規劃和marker點選氣泡事件
上一篇,之前的定位什麼的就不在說了,我們可以做個簡單的demo,點選地圖任意位置新增標記marker,並且根據,我們定位的位置為起點stNode,和marker標記即我們點選的位置即enNode,進行自動路線規劃,橙色程式碼位置為新增marker如果你只需要marker標
限制按鈕連續點選觸發事件時間間隔
我這裡用的layui所以以layui為例,個人可用。 var time = null; var flag = true;//按鈕是否可用true 可用,false 不可用 //捕獲普通按鈕事件 $("bod
C# winform呼叫類似按鈕點選的事件時自帶引數該怎麼寫 C# winform呼叫類似按鈕點選的事件時自帶引數該怎麼寫
來源:https://www.cnblogs.com/haizine/p/8242982.html C# winform呼叫類似按鈕點選的事件時自帶引數該怎麼寫 //按鈕事件 private void btn_Click(object sender, EventArgs e) {} //
百度地圖點選觸發事件介紹
談一下給標註新增一個事件,事件方法與Map事件機制相同。 監聽標註事件監聽標註事件是呼叫marker.addEventListener的方法,現在我們先看到核心類裡面的事件。這個事件是marker中的事件,但是marker事件是可以應用於全域性的,然後我們在所有的地圖上點選
vue學習六 元素點選觸發事件(無v-for父子關係)
1.在學習vue專案中,需使用如下需求:點選按鈕後,遮罩層顯示出來。本來若有v-for父子關係的,可以使用index進行迴圈遍歷實現,而無關聯的元素,則需要繫結類class來實現。 2.對點選元素繫結方法 <img src="../../stati
input圓形多選按鈕狀態改變(checked)與點選觸發事件的優先順序
在1.5之後 click事件先於屬性改變觸發,因為其在執行 click() 方法的時候實際上是走了 trigger ,jquery先走了內部事件系統找到了回撥函式執行,再執行的瀏覽器原生的 click()方法來觸發checkbox屬性變化。(原來如此)