React-native-router-flux: Androidでは非常に遅い

私がアンドロイドを持っていない問題。 多分コミュニティは助けることができます。 デバッグしようとしましたか？ このコンポーネントは、exNavigatorの単なるラッパーです。 ExNavigatorはAndroidでうまく機能しますか？

@timsuchanek 、ライブリロードとクロームデバッグなしでテストしましたか？ 私にとっては、ライブリロードまたはChromeデバッグをオンにしている場合にのみ（非常に）遅くなります;）

はい、デバッガーを有効にせずに試しました。 しかし、私が見つけたもの：
すでに一度開いている場合は、はるかに高速です。
最初の1〜2回だけ遅いです。
ExNavigatorスタンドアロンを確認します

ねえ@timsuchanekこれを報告してくれてありがとう。 アニメーションなしでは遅いですか（つまり、アニメーション構成<Scheme> ）？ 悪化した場合は、パフォーマンスのためにアニメーションを妥協するつもりです。 私もAndroidを持っていないか、自分で試してみます。

Android 4.4でサンプルアプリの速度が低下していることを確認できます（ボタンをクリックしてからルートが変更されるまでに最大2秒かかります）。 また、exNavigatorの例にも同じ問題はありません。

編集：クロムデバッグを有効にした後、遅延は魔法のように消えます-__________-

@sbycroszタブバーまたはすべてのページで遅いですか？

私は今日Androidでこのライブラリをテストしてきましたが、Chromeデバッグを使用しない限り、正常に動作しているようです。

タブ間の「切り替え」アニメーションには遅延があるようです。 調べています。

タブの「スイッチ」をテストしましたが、遅すぎてタブを変更するには約1.5秒です。 Chromeのデバッグとライブリロードをオフにしました。同じです。

最新版を確認してもらえますか？ また、debug.js内のコンソールログのコメントを解除して確認してください。

Androidタブレットでバージョン2.3.1のサンプルアプリをデバッグしようとしました。 アニメーションは非常に遅かった。
これは、debug.jsがコメントされていないコンソール出力です。
また、シンプルなアプリのリリースビルド（バージョン2.3.1を使用）を作成し、Samsung GalaxyS3で実行しました。 繰り返しますが、すべてが非常に遅かった。
たぶん「@exponent / react-native-navigator」：「^ 0.3.5」を最新のものに更新すると修正されますか？

コアエクスナビゲーターコードを確認してください

パベル。

24日。 2016г.、в21時18分、doomsower [email protected] написал（а）：

Androidタブレットでバージョン2.3.1のサンプルアプリをデバッグしようとしました。 アニメーションは非常に遅かった。
これは、debug.jsがコメントされていないコンソール出力です。
また、シンプルなアプリのリリースビルド（バージョン2.3.1を使用）を作成し、Samsung GalaxyS3で実行しました。 繰り返しますが、すべてが非常に遅かった。
たぶん「@exponent / react-native-navigator」：「^ 0.3.5」を最新のものに更新すると修正されますか？

—
このメールに直接返信するか、GitHubで表示してください。

やあ、

私も遅くなっています。 ただし、chromeデバッグを有効にすると、より高速になります。
シミュレーター（AndroidおよびiOS）および物理デバイスでの動作は、Chromeデバッグが無効になっている場合と同じです。

問題を切り分けるために「@exponent / react-native-navigator」を完全に無効にする方法はありますか？

ドディ

やあ、

私もこの問題を抱えていましたが、開発モードを無効にすることで解決しました。

ここでreact-nativegithubの問題：
https://github.com/facebook/react-native/issues/3049

別のルーターを試しましたが、Androidでもまったく同じでした。 デモは
非常に遅い。 だから、react-native-router-fluxになるかどうかはわかりません:)

トニー

Leven。 26févr。 2016年3時10分à、doddys [email protected] Aécrit：

やあ、

私も遅くなっています。 ただし、Chromeのデバッグが
有効にすると、より高速になります。
シミュレーター（AndroidとiOS）と物理デバイスでの動作は同じです
クロムデバッグが無効になっているときのように。

とにかく「@exponent / react-native-navigator」を完全に無効にする方法はありますか
問題を切り分けるには？

ドディ

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
。

やあ、

私はついにそれが私のデバイス/シミュレーターで遅い理由を見つけました。 私は自分の過ちによるものでした。
レデューサーでconsole.log（action）を実行していました。 それは多くの遅いことを判明します。 特にデバイスで実行した場合。 クロームデバッグがオンになったときは、はるかに強力なクロームJavaScriptエンジン（ラップトップとデバイス）を使用して実行されるため、問題ありませんでした。

すべてのログ（アクション）を削除した後、今でははるかに良くなっています。

ドディ

@doddysは私のために働きます👍

@doddysロガーミドルウェアでconsole.logを使用しています

これを閉じます。 将来の参照のために、それがreduxミドルウェアであるか、このライブラリのデバッグであるかにかかわらず、コードのどこにもconsole.logがないことを確認してください。

こんにちは。
私はこれを経験しています。 プロジェクト全体でconsole.logへのすべての呼び出しを削除し、開発モードをオフにし、chromeデバッグを使用/使用しないようにしました...リリースAPKをビルドし、react-native-router-fluxデモをそのまま実行しようとしました。 ...そして問題はまだ解決していません。
トランジションはしばらくは問題ないように見えるかもしれませんが、前後に移動してナビゲーターにストレスを与えると、アプリは最終的に遅くなり、場合によってはフリーズすることさえあります。
関連するreact-nativeの問題https://github.com/facebook/react-native/issues/3049#issuecomment-143505930に、回避策を説明するコメントがあり
Androidのパフォーマンスに関するReactNativeの公式ノートには、この回避策も記載されています： https ：//facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
どういうわけか、InteractionManagerの回避策をreact-native-router-fluxに統合することは可能でしょうか？
それまでは、Androidデバイスでモジュールを実際に使用することはできないと感じています。これは本当に残念です。

私は今日の時点で更新されたサンプルを実際のAndroidデバイスとシミュレーターの両方で試していましたが、それは単に使用できませんでした。
package.jsonを更新して、最新のreact-native "react-native": "^0.25.1",を使用しようとしましたが、今ではかなりスムーズに実行されます。

実際のAndroidデバイスで実行する場合
USBに接続すると、次のコマンドを実行する必要があります
コマンドラインから。

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

「JS開発モード」をオフにします

「JS開発モード」をオフにするか、
デバイス上で痛々しいほど遅く実行されます。

「react-nativerun-android」を実行した後、デバイスを「シェイク」する必要があります
メニューを表示します。 「開発設定」を選択し、「JS開発モード」のチェックを外します。

その後、「react-native run-android」をもう一度実行すると、さらに多くのことが必要になります
パフォーマー、少なくとも私はあなたに願っています:)

上記は修正されませんでした。 Nexus 6の動作が非常に遅いため、デバッグに使用できません。
あなたがあなたのAndroidバージョンをデバッグする方法を誰が知ることができますか...
この問題は長い間修正されていません...

ネクサス5xの場合も修正されていません。

RN（https://github.com/facebook/react-native/pull/10289）からプルリクエストがあり、NavigationExperimentalを更新してJSスレッドからアニメーションをオフロードしているようです。これでこの問題が解決するはずです。

ただし、react-native-router-fluxはNavigationExperimentalのフォークバージョン（react-native-navigation-experimental）を使用しているため、非推奨のファイルがいくつかあります（たとえば、NavigationAnimatedViewはNavigationTransitionerになりました）。おそらく更新する価値があります。

@aksonovはreact-native-navigation-experimentalのフォークを解除することは可能ですか？ 変更の頻度を考えると、フォークされたコピーを維持することは疑わしいようです。

リモートデバッグがオンになっているネクサス5で非常に遅い

同じ問題があります。 エミュレーターでは問題なく動作します。 ただし、デバイスでは、リモートjsデバッグが有効になっていると、アニメーションが非常に遅くなります（水平/垂直にアニメーション化する画面間のルーティング）。 残念ながら、オンとオフを何度も切り替える必要があります。
ウィコレニー2

情報のためだけに：

数日前、「react-native run-android」を実行してデバイスにインストールすると、明らかな理由もなく、完了するまでに約15/20分かかると思います（はい、私は待つためのヒーローです） ）。 ですから、苦労して実行して実行した後、何かを変更すると、問題はプロキシの背後にあることがわかり、gradle.propertiesファイルにプロキシ構成をコメントしました。 そのため、構成のコメントを解除すると、すべてが再び高速に実行されます。 理由はよくわかりませんが、うまくいきます。この構成についてもう一度コメントすると、すべてが再びゆっくりと実行されます。 したがって、誰かがこの問題を抱えていて、他の解決策が機能する場合は、この行をyout gradle.propertiesファイルに入れてみてください（もちろん、プロキシの背後にいる場合のみ）：

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

これが誰かの助けになることを願っています。

やあみんな、これは私に最も影響を与えるものです（ dev=falseとリモートjsデバッグを無効にすることを除いて）

問題

ルーターの移行+ android + react-native-svg

ソリューション

明らかにSvgを避けようとしますが、それらを使用する必要がある場合は、遷移が行われるまでレンダリングを遅らせます。 この手法のバリエーションを使用できます： https ：//facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions

私の場合、svg画像はかなりの数ですが、幸いなことに画面の下部にレンダリングされるため、ユーザーはそれらを表示するためにスクロールする必要があります。 したがって、これらのsvgのレンダリングを遅らせるだけで、パフォーマンスに大きな影響がありました（最初は約4秒でしたが、その後は約1秒未満でした）。

遅延はそれ自体が非常に難しいので、それを行うためのHOCを作成しました。 ここに要点があります（TSで書いたことを考慮に入れて、タイプ情報をストライプ化してJSになるようにしましたが、試していません）：

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}/>
    }
  }
}

したがって、このHOCで拡張するコンポーネントには、 partialRenderという新しい小道具があり、コンポーネントの軽量バージョンをレンダリングするか（ partialRender = true ）、すべてをレンダリングするか（ partialRender = false ）。

トランジションにネイティブアニメーションを使用するFacebookの新しい「公式」ナビゲーターについては、 https：//reactnavigation.org/を参照して

@Jickelsenそれはどのくらい公式ですか？

@adambeneは共同編集者リストを確認します。

Chromeデバッガーのスイッチを切るだけで、すべてが高速になります:)

@doddysあなたは素晴らしい人です！ 知ってるでしょ？

@doddysありがとう、あなたはその日を救った！

解決されていません

"react-native-router-flux"： "4.0.6"、