React-native-router-flux: 在安卓上非常慢

我没有安卓的问题。 也许社区可以提供帮助。 你试过调试吗？ 该组件只是 exNavigator 的包装器。 ExNavigator 在 android 上运行良好吗？

@timsuchanek ，您是否在没有实时重新加载和 chrome 调试的情况下对其进行了测试？ 对我来说，当我进行实时重新加载或 chrome 调试时，它只是（非常）慢；）

嘿，是的，我在没有启用调试器的情况下尝试过。 但我发现：
如果已经打开过一次，速度会快很多。
只有前 1-2 次它很慢。
我将检查 ExNavigator 独立

嘿@timsuchanek感谢您报告此事。 没有动画会慢吗（即没有动画配置的<Scheme> ）？ 如果情况变得更糟，我愿意为性能妥协动画。 我也没有安卓，要不我自己试试。

我可以确认示例应用程序在 Android 4.4 上变慢了（从单击按钮到任何路线更改需要大约 2 秒）。 exNavigator 示例没有相同的问题。

编辑：启用 chrome 调试后，延迟神奇地消失了 -__________-

@sbycrosz标签栏或所有页面都慢吗？

我今天一直在 Android 上测试这个库，只要我不使用 chrome 调试，它似乎就可以正常工作。

选项卡之间的“切换”动画似乎确实存在延迟。 我正在研究它。

我已经测试了选项卡上的“开关”，它太慢了，大约 1.5 秒才能更改选项卡。 我已经关闭了 chrome 调试和实时重新加载，它是一样的。

你能检查一下最新版本吗？ 另外请在 debug.js 中取消注释控制台日志记录并检查。

我尝试在 Android 平板电脑上调试 2.3.1 版的示例应用程序。 动画非常缓慢。
这是 debug.js 未注释的控制台输出
我还制作了一个简单应用程序的发布版本（使用版本 2.3.1）并在三星 Galaxy S3 上运行它。 一切都非常缓慢。
也许将 "@exponent/react-native-navigator": "^0.3.5" 更新到最新版本会解决这个问题？

请检查核心浏览器代码

帕维尔。

24 日。 2016 年 21:18，doomsower [email protected] написал(а)：

我尝试在 Android 平板电脑上调试 2.3.1 版的示例应用程序。 动画非常缓慢。
这是 debug.js 未注释的控制台输出
我还制作了一个简单应用程序的发布版本（使用版本 2.3.1）并在三星 Galaxy S3 上运行它。 一切都非常缓慢。
也许将 "@exponent/react-native-navigator": "^0.3.5" 更新到最新版本会解决这个问题？

—
直接回复此邮件或在 GitHub 上查看。

你好，

我也遇到了缓慢的情况。 但是，当启用 chrome 调试时，速度会更快。
模拟器（android 和 iOS）和物理设备中的行为与禁用 chrome 调试时的行为相同。

无论如何要完全禁用“@exponent/react-native-navigator”来隔离问题？

多迪

你好，

我也有这个问题，但我通过禁用开发模式解决了它。

这里是 react-native github 上的问题：
https://github.com/facebook/react-native/issues/3049

我尝试了另一个路由器，它在android上完全相同。 演示是
非常慢。 所以，我不确定它是否涉及 react-native-router-flux :)

托尼

勒文。 26 热度 2016 à 03:10，doddys [email protected] a écrit：

你好，

我也遇到了缓慢的情况。 但是，当 chrome 调试是
启用，速度更快。
模拟器（Android 和 iOS）和物理设备中的行为是相同的
就像禁用 chrome 调试一样。

无论如何要完全禁用“@exponent/react-native-navigator”
隔离问题？

多迪

—
直接回复此邮件或在 GitHub 上查看
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

你好，

我终于找到了在我的设备/模拟器上运行缓慢的原因。 我是因为我自己的错误。
我在减速器中做一个 console.log(action) 。 结果证明事情很慢。 特别是在设备上执行时。 当 chrome 调试打开时没问题，因为它是使用更强大的 chrome javascript 引擎执行的（笔记本电脑与设备）。

删除所有日志（操作）后，现在好多了。

多迪

@doddys对我有用👍

@doddys我在我的记录器中间件中使用 console.log😂😂

我要关闭这个。 为了将来参考，请确保代码中的任何地方都没有 console.log，无论是您的 redux 中间件还是该库的调试

你好。
我正在经历这个。 我尝试在整个项目中删除对 console.log 的所有调用，尝试关闭开发模式，尝试使用/不使用 chrome 调试......甚至尝试构建发布版 APK 并按原样运行 react-native-router-flux 演示......问题仍然存在。
过渡可能在一段时间内看起来不错，但如果您通过前后移动来强调导航器，应用程序最终会变慢，有时甚至会冻结。
对相关的 react-native 问题https://github.com/facebook/react-native/issues/3049#issuecomment -143505930 有评论，描述了一种解决方法。
在 React Native 官方关于 Android 性能的注释中，也提到了这个解决方法： 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-native run-android”后，你应该“摇动”你的设备
调出菜单。 选择“开发设置”，然后取消选中“JS 开发模式”。

之后再次运行“react-native run-android”，它应该更多
高性能，至少我希望你:)

以上没有解决。 我的 Nexus 6 运行速度极慢，无法用于调试。
谁能告诉你如何调试你的android版本......
问题好久没解决了。。。

对于nexus 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 的分叉？ 考虑到更改的频率，维护分叉副本似乎很可疑。

在 nexus 5 上打开远程调试非常慢

我有同样的问题。 在模拟器上它工作正常。 但是在设备上，当启用远程 js 调试时，动画非常滞后（在水平/垂直动画的屏幕之间路由）。 太糟糕了，必须经常打开和关闭它。
维科·莱尼 2

仅供参考：

几天前，我想当我运行“react-native run-android”来安装我的设备时，无缘无故，大约需要 15/20 分钟才能完成（是的，我是等待的英雄）。 所以在痛苦地运行和运行之后，我发现我的问题是我在代理后面，并且在 gradle.properties 文件中评论了我的代理配置。 所以我取消对配置的注释，一切再次运行得更快。 我真的不知道为什么，但对我有用，并且确保我再次评论此配置并且一切再次缓慢运行。 因此，如果有人遇到此问题并且任何其他解决方案有效，请尝试将此行放在您的 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 ）。

请参阅https://reactnavigation.org/以了解 Facebook 的新“官方”导航器，该导航器使用本机动画进行过渡。

@Jickelsen它有多官方？

@adambene检查合作者名单。

只需关闭您的 Chrome 调试器，一切都会很快:)

@doddys你是个好人！ 你知道的？

@doddys谢谢伙计，你拯救了这一天！

没有解决

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