1. 程式人生 > >React Native之Android 和 iOS在點選觸發事件時的相容性處理

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 NativeAndroid iOS觸發事件相容性處理

最近,我在專案中遇到了一個bug,bug的情況描述大致如下: 當點選按鈕A時,彈出彈層,彈層有一個按鈕B,邏輯是:當點選按鈕B時,首先彈層消失,緊接著開始調取C介面流程。在Android上正確顯示,但是iOS中只是彈層消失,並沒有調取C介面事件。 對於這種情況,我之前開發過

React native android的圖示啟動圖片

哎哎呀呀,上篇說到了react native的IOS的圖示和啟動圖片的設定,其實最主要的是尺寸!相應的尺寸設定好了以後就不會報錯了!ok~這篇說的是React native的android的圖示和啟動頁面!!!!!1.圖示:其實android的圖示設定很簡單,一般情況下只需要替換就可以了(當然你也可以不去替換

React NativeAndroid原生通過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-NativeAndroid:原生介面與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 NativeAndroid 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屬性變化。(原來如此)