React-native-router-flux: Sangat lambat di android

Masalahnya saya tidak punya android. Mungkin masyarakat bisa membantu. Sudahkah Anda mencoba men-debug? Komponen ini hanya membungkus exNavigator. Apakah ExNavigator berfungsi dengan baik di android?

@timsuchanek , apakah Anda mengujinya tanpa memuat ulang langsung dan debug chrome? Bagi saya itu hanya (sangat) lambat ketika saya memuat ulang langsung atau debug chrome;)

Hei, ya saya mencobanya tanpa debugger diaktifkan. Tapi yang saya temukan:
Jika sudah dibuka sekali, itu jauh lebih cepat.
Baru 1-2 kali pertama lambat.
Saya akan memeriksa ExNavigator mandiri

Hai @timsuchanek terima kasih telah melaporkan ini. Apakah lambat tanpa animasi (yaitu <Scheme> tanpa konfigurasi animasi)? Saya bersedia berkompromi dengan animasi untuk kinerja jika yang lebih buruk menjadi lebih buruk. Saya juga tidak memiliki Android, atau saya akan mencobanya sendiri.

Saya dapat mengonfirmasi bahwa aplikasi contoh melambat di Android 4.4 (Dibutuhkan ~2 detik dari mengklik tombol hingga perubahan rute apa pun). Dan contoh exNavigator tidak memiliki masalah yang sama.

Sunting: Setelah mengaktifkan chrome debugging, penundaan menghilang secara ajaib -____________-

@sbycrosz Apakah lambat untuk bilah tab atau untuk semua halaman?

Saya telah menguji perpustakaan ini di Android hari ini dan tampaknya berfungsi dengan baik selama saya tidak menggunakan chrome debugging.

Tampaknya ada penundaan dalam animasi 'beralih' antar tab. Aku sedang melihat ke dalamnya.

Saya telah menguji 'switch' pada tab, terlalu lambat, sekitar 1,5 detik untuk mengubah tab. Saya telah mematikan debug chrome dan memuat ulang langsung, itu sama.

Bisakah Anda memeriksa versi terbaru? Juga harap batalkan komentar logging konsol dalam debug.js dan periksa.

Saya telah mencoba men-debug aplikasi Contoh dari versi 2.3.1 di tablet Android. Animasi sangat lambat.
Ini adalah keluaran konsol dengan debug.js tidak dikomentari
Saya juga membuat rilis aplikasi sederhana (menggunakan versi 2.3.1) dan menjalankannya di Samsung Galaxy S3. Sekali lagi semuanya sangat lambat.
Mungkin memperbarui "@exponent/react-native-navigator": "^0.3.5" ke yang terbaru akan memperbaikinya?

Silakan periksa kode exnavigator inti

aspal.

24 bulan. 2016 ., 21:18, doomsower [email protected] аписал(а):

Saya telah mencoba men-debug aplikasi Contoh dari versi 2.3.1 di tablet Android. Animasi sangat lambat.
Ini adalah keluaran konsol dengan debug.js tidak dikomentari
Saya juga membuat rilis aplikasi sederhana (menggunakan versi 2.3.1) dan menjalankannya di Samsung Galaxy S3. Sekali lagi semuanya sangat lambat.
Mungkin memperbarui "@exponent/react-native-navigator": "^0.3.5" ke yang terbaru akan memperbaikinya?

—
Balas email ini secara langsung atau lihat di GitHub.

Hai,

Saya juga mengalami kelambatan. Namun, ketika debug chrome diaktifkan, ini lebih cepat .
Perilaku dalam simulator (android dan iOS) dan perangkat fisik sama seperti saat debug chrome dinonaktifkan.

Apakah ada cara untuk menonaktifkan "@exponent/react-native-navigator" sepenuhnya untuk mengisolasi masalah?

Doddy

Hai,

Saya juga mengalami masalah ini, tetapi saya menyelesaikannya dengan menonaktifkan mode dev.

Di sini masalah pada github asli-reaksi :
https://github.com/facebook/react-native/issues/3049

Saya mencoba router lain dan itu persis sama di Android. Demonya adalah
sangat lambat. Jadi, saya tidak yakin tentang reaksi-asli-router-fluks :)

Tony

Le ven. 26 fevr. 2016 03:10, doddys [email protected] a écrit :

Hai,

Saya juga mengalami kelambatan. Namun, ketika debug chrome adalah
diaktifkan, lebih cepat.
Perilaku dalam simulator (android dan iOS) dan perangkat fisik adalah sama
seperti ketika chrome debugging dinonaktifkan.

Apakah ada cara untuk menonaktifkan "@exponent/react-native-navigator" sepenuhnya
untuk mengisolasi masalah?

Doddy

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

Hai,

Saya akhirnya menemukan mengapa itu lambat di perangkat/simulator saya. Saya karena kesalahan saya sendiri.
Saya sedang melakukan console.log(action) di reduksi. Itu ternyata banyak hal yang lambat. Apalagi saat dieksekusi di perangkat. Tidak apa-apa ketika chrome debugging dihidupkan karena dijalankan menggunakan mesin javascript chrome yang jauh lebih kuat (laptop vs perangkat).

Setelah menghapus semua log (tindakan), sekarang jauh lebih baik.

Doddy

@doddys bekerja untuk saya 👍

@doddys Saya menggunakan console.log di middleware logger saya😂😂

Aku akan menutup ini. Untuk referensi di masa mendatang, pastikan untuk tidak memiliki console.log di mana pun dalam kode, apakah itu middleware redux Anda atau dalam debug untuk perpustakaan ini

Halo.
saya sedang mengalami ini. Saya mencoba menghapus semua panggilan ke console.log di seluruh proyek, mencoba mematikan mode dev, mencoba menggunakan/tidak menggunakan debug chrome... bahkan mencoba membuat APK rilis dan menjalankan demo react-native-router-flux Anda apa adanya ... dan masalahnya masih berlanjut.
Transisi mungkin terlihat baik-baik saja untuk sementara waktu tetapi jika Anda menekan navigator dengan mundur dan maju, aplikasi pada akhirnya akan melambat dan kadang-kadang bahkan akan membeku.
Ada komentar tentang masalah reaksi asli terkait https://github.com/facebook/react-native/issues/3049#issuecomment -143505930 yang menjelaskan solusi.
Pada catatan resmi React Native tentang kinerja Android, solusi ini juga disebutkan: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
Apakah mungkin untuk mengintegrasikan solusi InteractionManager pada react-native-router-flux entah bagaimana?
Sampai saat itu saya merasa saya tidak dapat benar-benar menggunakan modul di perangkat Android, yang sangat disayangkan.

Saya mencoba Contoh yang diperbarui pada hari ini dengan perangkat dan simulator Android nyata dan itu tidak dapat digunakan.
Saya mencoba memperbarui package.json jadi untuk menggunakan react-native "react-native": "^0.25.1", dan sekarang berjalan cukup lancar.

Saat dijalankan di perangkat Android sebenarnya yaitu
dicolokkan ke usb, Anda perlu menjalankan yang berikut:
dari baris perintah.

$ react-native start
$ adb reverse tcp:8081 tcp:8081
$ react-native run-android

matikan "Mode Pengembang JS

Anda akan ingin memastikan bahwa Anda mematikan "Mode Dev JS," atau yang lain itu
akan berjalan sangat lambat pada perangkat.

Setelah menjalankan "react-native run-Android" Anda harus "mengguncang" perangkat Anda
untuk memunculkan menu. Pilih "Pengaturan Dev" lalu hapus centang "Mode Dev JS."

Setelah itu jalankan "react-native run-Android" lagi dan seharusnya lebih
kinerja, setidaknya saya berharap untuk Anda :)

Di atas tidak diperbaiki. Nexus 6 saya berjalan sangat lambat tidak dapat digunakan dalam debug.
Siapa yang tahu bagaimana Anda men-debug versi Android Anda...
Masalahnya tidak diperbaiki untuk waktu yang lama ...

Untuk nexus 5x tidak diperbaiki juga.

Sepertinya ada permintaan tarik dari RN (https://github.com/facebook/react-native/pull/10289) yang memperbarui NavigationExperimental untuk melepas animasi dari utas JS, yang seharusnya menyelesaikan masalah ini.

Namun, react-native-router-flux menggunakan versi bercabang dari NavigationExperimental (react-native-navigation-experimental), yang memiliki beberapa file yang tidak digunakan lagi (misalnya NavigationAnimatedView sekarang menjadi NavigationTransitioner) jadi mungkin perlu memperbaruinya.

@aksonov apakah mungkin untuk melepaskan reaksi-asli-navigasi-eksperimental? Tampaknya meragukan untuk mempertahankan salinan bercabang mengingat frekuensi perubahan.

pada nexus 5 sangat lambat dengan debugging jarak jauh dihidupkan

Saya punya masalah yang sama. Pada emulator berfungsi dengan baik. Tetapi pada perangkat, animasinya sangat lambat (perutean antar layar yang bergerak secara horizontal/vertikal) saat debugging js jarak jauh diaktifkan. sayang sekali, harus banyak menyalakan dan mematikannya.
Wiko Lenny 2

Hanya untuk informasi:

Beberapa hari yang lalu, saya membayangkan bahwa ketika saya menjalankan "react-native run-android" untuk menginstal di perangkat saya, tanpa alasan yang jelas, dibutuhkan sekitar 15/20 menit untuk menyelesaikannya (ya, saya adalah pahlawan untuk menunggu ). Jadi setelah menjalankan dan menjalankan dengan susah payah, mengubah sesuatu, saya menemukan bahwa masalah saya adalah saya berada di belakang proxy dan saya telah mengomentari konfigurasi proxy saya pada file gradle.properties. Jadi saya batalkan komentar pada konfigurasi dan semuanya berjalan lebih cepat lagi. Saya benar-benar tidak tahu mengapa, tetapi bekerja untuk saya, dan untuk memastikan saya mengomentari konfigurasi ini lagi dan semuanya berjalan lambat lagi. Jadi, jika seseorang mengalami masalah ini dan solusi lain berfungsi, coba letakkan baris ini di file gradle.properties Anda (Hanya jika Anda berada di belakang proxy, tentu saja):

systemProp.http.proxyHost=192.168.X.XX //put your server IP here
systemProp.http.proxyPort=8888 //put your server PORT here
systemProp.http.proxyUser=xxxxxxx //put your PROXY USER here
systemProp.http.proxyPassword=xxxxxxx //put your PROXY USER PASSWORD here

systemProp.https.proxyHost=192.168.X.XX //put your server IP here
systemProp.https.proxyPort=8888 //put your server PORT here
systemProp.https.proxyUser=xxxxxxx //put your PROXY USER here
systemProp.https.proxyPassword=xxxxxxx //put your PROXY USER PASSWORD here

Saya harap ini membantu seseorang.

Hai teman-teman, ini yang paling berdampak bagi saya (selain dev=false dan menonaktifkan debugging js jarak jauh)

Masalah

Transisi router + android + react-native-svg

Solusinya

Jelas mencoba untuk menghindari Svg, tetapi jika Anda harus menggunakannya, maka tunda renderingnya hingga transisi dilakukan. Anda dapat menggunakan variasi teknik ini: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions

Dalam kasus saya, gambar svg cukup sedikit, tapi untungnya mereka ditampilkan di bagian bawah layar, jadi pengguna perlu menggulir untuk melihatnya. Jadi hanya menunda rendering svgs tersebut memiliki dampak besar dalam kinerja (awalnya sekitar 4 detik dan setelah itu sekitar kurang dari 1 detik).

Menunda cukup rumit dengan caranya sendiri jadi saya membuat HOC untuk melakukannya. Ini intinya (perhitungkan yang saya tulis di TS dan saya baru saja menghapus informasi jenisnya sehingga menjadi JS tetapi saya belum mencobanya):

import React from 'react'
import { InteractionManager } from 'react-native';

const MAX_DELAY = 500;

export default function providePartialRender(Component) {
  return class PartialRenderProvider extends React.Component {
    // initialize state (same as inside the constructor, just syntax sugar)
    state = {
      partialRender: true,
    };

    componentDidMount() {
      const updatePartialRender = () => {
        this.setState(state => {
          state.partialRender = false
          return state;
        });
      }
      // workaround https://github.com/facebook/react-native/issues/8624
      let called = false;
      const timeout = setTimeout(() => { called = true; updatePartialRender() }, MAX_DELAY);
      InteractionManager.runAfterInteractions(() => {
        if (called) return;
        clearTimeout(timeout);
        updatePartialRender();
      });
    }

    render() {
      const props = Object.assign(
        {},
        this.props,
        { partialRender: this.state.partialRender }
      );

      return <Component {...props}/>
    }
  }
}

Jadi sekarang, komponen yang Anda tingkatkan dengan HOC ini akan memiliki prop baru bernama partialRender yang akan memberi tahu mereka apakah akan merender versi komponen yang lebih ringan ( partialRender = true ) atau untuk merender semuanya ( partialRender = false ).

Lihat https://reactnavigation.org/ untuk navigator "resmi" baru dari Facebook, yang menggunakan animasi asli untuk transisi.

@Jickelsen Seberapa resmi itu?

@adambene periksa daftar kolaborator.

matikan saja Chrome Debugger Anda dan semuanya akan cepat :)

@doddys Anda adalah pria yang hebat! Kamu tahu itu?

@doddys Terima kasih

tidak terselesaikan

"react-native-router-flux": "4.0.6",