React-native-router-flux: Чрезвычайно медленно на Android

Созданный на 11 февр. 2016  ·  34Комментарии  ·  Источник: aksonov/react-native-router-flux

Привет, прежде всего: классная библиотека!
API и использование просто потрясающее!

Я пробую RNRF на Android на Nexus 5, но получаю очень медленные ответы, см. Здесь:
https://drive.google.com/file/d/0B-zpEic041zoR1Fhd0VhTnA5VkU/view?usp=sharing

Есть идеи, почему это так?
Спасибо!

Самый полезный комментарий

Привет,

Наконец-то я понял, почему на моем устройстве / симуляторе все работает медленно. Я был виноват в своей ошибке.
Я делал console.log (действие) в редукторах. Это часто оказывается медленным. Особенно при исполнении на устройстве. Было нормально, когда была включена хромированная отладка, потому что она выполняется с использованием хромированного движка javascript, который намного мощнее (ноутбук против устройства).

После удаления всего журнала (действия) теперь стало намного лучше.

Додди

Все 34 Комментарий

Проблема у меня нет андроида. Может быть, сообщество может помочь. Вы пробовали отлаживать? Этот компонент - просто оболочка exNavigator. ExNavigator хорошо работает на android?

@timuchanek , вы тестировали без перезагрузки в реальном времени и хромированной отладки? Для меня это только (чрезвычайно) медленно, когда у меня включена перезагрузка в реальном времени или хромированная отладка;)

Эй, да, я пробовал без включенного отладчика. Но что я нашел:
Если он уже был открыт один раз, это намного быстрее.
Только первые 1-2 раза медленно.
Я проверю ExNavigator автономно

Привет, @timuchanek, спасибо, что сообщили об этом. Это медленно без анимации (т.е. <Scheme> без конфигурации анимации)? Я готов пойти на компромисс с анимацией ради производительности, если станет хуже. Андроида у меня тоже нет, а то я бы сам попробовал.

Я могу подтвердить, что пример приложения замедлился на Android 4.4 (для изменения маршрута требуется ~ 2 секунды от нажатия кнопки). И в примерах exNavigator такой проблемы нет.

Изменить: после включения хромовой отладки задержка волшебным образом исчезнет -__________-

@sbycrosz Это медленно для панели вкладок или для всех страниц?

Сегодня я тестировал эту библиотеку на Android, и, похоже, она работает нормально, пока я не использую хромированную отладку.

Кажется, есть задержка в анимации переключения между вкладками. Я изучаю это.

Я тестировал «переключатель» на вкладке, он слишком медленный, около 1,5 с, чтобы сменить вкладку. Я отключил хромированную отладку и перезагрузку в реальном времени, это то же самое.

Не могли бы вы проверить последнюю версию? Также раскомментируйте журнал консоли в debug.js и проверьте.

Я пробовал отлаживать пример приложения с версии 2.3.1 на планшете Android. Анимация была очень медленной.
Вот вывод консоли с раскомментированным debug.js
Я также сделал сборку простого приложения (с использованием версии 2.3.1) и запустил его на Samsung Galaxy S3. Опять все было очень медленно.
Может быть, обновление "@ exponent / response-native-navigator": "^ 0.3.5" до последней версии исправит это?

Пожалуйста, проверьте основной код exnavigator

Павел.

24 февр. 2016 г., в 21:18, doomsower [email protected] написал (а):

Я пробовал отлаживать пример приложения с версии 2.3.1 на планшете Android. Анимация была очень медленной.
Вот вывод консоли с раскомментированным debug.js
Я также сделал сборку простого приложения (с использованием версии 2.3.1) и запустил его на Samsung Galaxy S3. Опять все было очень медленно.
Может быть, обновление "@ exponent / response-native-navigator": "^ 0.3.5" до последней версии исправит это?

-
Ответьте на это письмо напрямую или просмотрите его на GitHub.

Привет,

Я тоже испытываю медлительность. Однако при включенной отладке Chrome это происходит быстрее.
Поведение в симуляторе (Android и iOS) и на физическом устройстве такое же, как при отключенной отладке хрома.

Есть ли способ полностью отключить "@ exponent / react-native-navigator", чтобы изолировать проблему?

Додди

Привет,

У меня тоже была эта проблема, но я решил ее, отключив режим разработчика.

Здесь проблема с реактивным github:
https://github.com/facebook/react-native/issues/3049

Я попробовал другой роутер, и на андроиде было точно так же. Демо было
очень медленно. Итак, я не уверен, что речь идет о response-native-router-flux :)

Тони

Le ven. 26 февр. 2016 г. в 03:10, doddys [email protected] , критик:

Привет,

Я тоже испытываю медлительность. Однако, когда отладка хрома
включен, это быстрее.
Поведение в симуляторе (Android и iOS) и на физическом устройстве одинаковое
как при отключенной отладке хрома.

Есть ли способ полностью отключить "@ exponent / react-native-navigator"
изолировать проблему?

Додди

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

Привет,

Наконец-то я понял, почему на моем устройстве / симуляторе все работает медленно. Я был виноват в своей ошибке.
Я делал console.log (действие) в редукторах. Это часто оказывается медленным. Особенно при исполнении на устройстве. Было нормально, когда была включена хромированная отладка, потому что она выполняется с использованием хромированного движка javascript, который намного мощнее (ноутбук против устройства).

После удаления всего журнала (действия) теперь стало намного лучше.

Додди

@doddys у меня работает 👍

@doddys Я использую console.log в промежуточном программном обеспечении моего регистратора😂😂

Я закрою это. Для дальнейшего использования убедитесь, что в коде нет console.log, будь то промежуточное ПО redux или отладка для этой библиотеки.

Привет.
Я это переживаю. Я попытался удалить все вызовы console.log на протяжении всего проекта, попытался отключить режим разработчика, попытался использовать / не использовать хром отладку ... даже попытался создать релиз APK и запустить демо-версию response-native-router-flux как есть ... и проблема все еще сохраняется.
Некоторое время переходы могут выглядеть нормально, но если вы перегрузите навигатор, возвращаясь назад и вперед, приложение в конечном итоге замедлится, а иногда даже зависнет.
Существует комментарий к связанной проблеме, связанной с реакцией, 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 Dev Mode

Убедитесь, что вы выключили "JS Dev Mode", иначе он
будет мучительно медленно работать на устройстве.

После запуска "react-native run-android" вам следует "встряхнуть" ваше устройство
открыть меню. Выберите «Настройки разработчика», затем снимите флажок «Режим разработки JS».

После этого снова запустите "react-native run-android", и должно быть больше
исполнитель, по крайней мере я на тебя надеюсь :)

Вышеуказанное не помогло. Мой Nexus 6 работает очень медленно, его нельзя использовать для отладки.
Кто подскажет, как вы отлаживаете свою версию андроида ...
Проблема долго не решалась ...

Для nexus 5x тоже не исправлено.

Похоже, есть запрос на перенос от RN (https://github.com/facebook/react-native/pull/10289), который обновляет NavigationExperimental для выгрузки анимации из потока JS, что должно решить эту проблему.

Однако response-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. Итак, я раскомментирую конфигурации, и все снова работает быстрее. Я действительно не знаю почему, но у меня работает, и, конечно же, я снова комментирую эти конфигурации, и все снова работает медленно. Итак, если у кого-то возникла эта проблема, и любые другие решения работают, попробуйте поместить эти строки в файл 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 ).

См. Https://reactnavigation.org/, чтобы узнать о новом «официальном» навигаторе от Facebook, который использует встроенную анимацию для переходов.

@Jickelsen Насколько это официально?

@adambene проверить список соавторов.

просто выключите отладчик Chrome, и все будет быстро :)

@doddys Ты замечательный человек! Ты знаешь это?

@doddys Спасибо, чувак, ты спас положение!

не решено

"реагировать-native-router-flux": "4.0.6",

Была ли эта страница полезной?
0 / 5 - 0 рейтинги