React-native-router-flux: Ketuk dua kali menembak Aksi dua kali

Untuk lebih memperjelas masalah ini saya membuat GIF dari contoh proyek, @aksonov ,

@abeltje1 apakah Anda menemukan cara untuk memperbaikinya? Saya bahkan tidak menyadarinya sebelumnya tetapi setelah mencoba saya melihat masalah yang sama. Sekarang saya perlu memperbaikinya karena ini adalah bug UX utama.

Ini bisa menjadi masalah navigasi reaksi. Saya tidak dapat mereproduksinya dengan emulator iOS 10.. Bagaimanapun, saya baru saja menambahkan beberapa perubahan, dapatkah Anda memeriksa master terbaru?

@aksonov terima kasih banyak! Saya akan memeriksanya dalam beberapa menit, akan memberi tahu Anda. Anda benar-benar tidak dapat mereproduksi? itu aneh.. saya juga menggunakan emulator iOS 10 (XCode 8.3.3).

Bersulang

@aksonov Saya mencoba komit terbaru Anda tetapi tidak berhasil :( Mengklik berturut-turut dengan sangat cepat masih membuka layar dua kali.

Duplikat https://github.com/react-community/react-navigation/issues/135 ?

Saya mereproduksi masalah ini - masalahnya ada di refresh dalam componentDidMount dari Login. Tampaknya anti-pola dan tidak boleh digunakan - onEnter harus digunakan sebagai gantinya.

Hmm, saya tidak sepenuhnya mengerti apa yang Anda coba katakan. Di aplikasi saya sendiri, itu terjadi pada setiap tombol yang saya ikat Actions.key. Dalam contoh itu juga terjadi pada setiap transisi yang mungkin (seperti yang Anda lihat di GIF, ini tidak hanya saat masuk tetapi juga saat mendaftar). Bagaimana mungkin karena componentDidMount login tetapi juga muncul di adegan lain?

Saya minta maaf jika saya tidak memahaminya dengan benar, tetapi saya mengalami kesulitan untuk memahaminya.

Maaf, saya hanya dapat mereproduksinya dengan Login. Mungkin saya memiliki mouse yang buruk (Apple one) yang tidak memungkinkan untuk mengklik lebih cepat. Bagaimanapun, silakan periksa masalah terkait, sepertinya masalah navigasi reaksi.

Anda benar, ini adalah masalah navigasi reaksi. Tapi apa yang harus kita lakukan sekarang? tunggu mereka sampai mereka memperbaikinya (dengan status penanganan masalah saat ini dari React Navigation bisa memakan waktu lama lol)? Atau memperbaikinya di dalam RNRF? Atau haruskah semua pengembang menerapkan solusi mereka sendiri sampai React Navigation memperbaiki masalah?

Apa yang Anda sarankan?

Bersulang

Saya sarankan Anda mencoba PR yang disarankan terlebih dahulu. Jika itu membantu, Anda bisa menggunakan navigasi reaksi bercabang sampai mereka menggabungkannya.

akan dilakukan, terima kasih atas bantuannya!

Saya juga punya masalah

Silakan periksa master terbaru sekarang.

Ini berfungsi untuk semua Tindakan kecuali untuk pop (memanggil pop secara manual), kemajuan yang sangat bagus!

Saya masih memiliki masalah yang sama

react-native-router-flux v4.0.0-beta.18
reaksi asli v0.46.4

@gtauniverse Baca komentar saya di atas

Bantuan @aksonov . Bagaimana cara menginstal master terbaru?

Masalah masih terjadi dengan rilis terbaru! Bagaimana menangani ini?

@aksonov , saya memiliki masalah yang sama di sini dengan rnrf 4.0.0-beta.27 dan rn 0.52

Saya telah melacak masalah ini untuk waktu yang sangat lama dan saya perhatikan bahwa navigasi reaksi baru-baru ini menambahkan dukungan untuk navigasi idempoten (https://github.com/react-navigation/react-navigation/pull/3393), yang akan memecahkan masalah ini. Apakah versi navigasi reaksi ini sudah didukung dalam versi beta react-native-router-flux terbaru?

Tidak. Kami menunggu hingga 1.0 API baru akan stabil

Terima kasih atas balasan Anda, apakah Anda memiliki tindakan untuk memperbaiki masalah ini hingga saatnya tiba atau ETA untuk 1.0 yang stabil?

Ini adalah solusi yang saya gunakan untuk saat ini:

Untuk setiap tombol yang memicu tindakan navigasi, Anda dapat membungkus semua prosesnya dalam kondisi if seperti:

if(Actions.currentScene == currentSceneKey) {

// Do your treatement here

}

Di mana currentSceneKey adalah kunci adegan tempat aksi dipicu.

Ini hanya terpicu sekali karena ketika Anda melakukannya untuk pertama kalinya, itu masih pada adegan saat ini, tetapi untuk semua ketukan tambahan lainnya yang dapat Anda lakukan, adegan tumpukan sudah diperbarui (dengan menambahkan adegan baru yang Anda navigasikan ke atau dengan memunculkan adegan saat ini jika Anda menavigasi kembali) oleh karena itu Actions.currentScene tidak akan sama dengan adegan saat ini lebih dari sekali.

Untuk kode yang lebih bersih, saya telah membuat struktur yang menampung semua kunci adegan yang saya gunakan di Router.js dan untuk trik ini, Ini memungkinkan saya untuk dengan mudah menangani penggantian nama adegan kunci dan menambahkan adegan baru:

import { sceneKeys } from './const/sceneKeys'

if(Actions.currentScene == sceneKeys.currentSceneKey) {

// Do your treatement here

}

Ini juga berfungsi untuk tombol header yang ditentukan langsung di Router.js (saya lebih suka mendefinisikannya dalam adegan mereka sendiri melalui navigasi statis).

Catatan: Bekerja dengan adegan tabbar juga, tetapi perlu diketahui bahwa kunci yang dihasilkan oleh Actions.currentScenes untuk adegan tabbar adalah kunci yang Anda tentukan untuk itu di Router.js diawali dengan '_' jadi pastikan untuk menambahkannya di CurrentSceneKey Anda

Semoga itu akan membantu Anda;)

Mungkin solusi paling sederhana yang digunakan untuk setiap instance Actions.xxx()

<Button onPress={() => Actions.currentScene !== "page1" ? Actions.page1() : {}} >Page 1</Button>

Menikmati

@hammooooody ini bekerja dengan baik untuk saya.

Baca https://github.com/react-navigation/react-navigation/pull/3393 tetapi tidak dapat menemukan cara bawaan untuk membuatnya berfungsi - mungkin melewatkan sesuatu yang jelas ... (?)

Saya mengikuti solusi Anda dengan menggunakan file pembantu untuk menentukan metode yang dapat digunakan secara global.

Contoh Penggunaan

import * as actions from './config/actions';

<TouchableOpacity
    onPress={() =>
        actions.push('venueItemView', { id, summary: this.props.venueData })
    }
>

action.js (file pembantu)

import { Actions } from 'react-native-router-flux';

export const push = (destinationScene, props) => {
    // console.log('push', destinationScene, Actions.currentScene, props);
    if (Actions.currentScene === destinationScene) {
        return;
    }
    return Actions[destinationScene](props);
};

Indah @e10a!

kamu menyelamatkan hidupku @e10a 👍 D

Apakah ada cara agar pemeriksaan ini dapat dimasukkan ke dalam RNRF secara default?