React-native-router-flux: 안드로이드에서 매우 느림

안드로이드가 없다는 문제. 어쩌면 커뮤니티가 도움이 될 수 있습니다. 디버깅을 시도 했습니까? 이 구성 요소는 exNavigator를 둘러싼 래퍼일 뿐입니다. ExNavigator는 안드로이드에서 잘 작동합니까?

@timsuchanek , 라이브 리로딩과 크롬 디버깅 없이 테스트하셨나요? 나를 위해 라이브 다시로드 또는 크롬 디버깅이 켜져있을 때만 (매우) 느립니다 ;)

예, 디버거를 활성화하지 않고 시도했습니다. 그러나 내가 찾은 것 :
이미 한 번 열린 경우 훨씬 빠릅니다.
처음 1~2번만 느립니다.
ExNavigator 독립 실행형을 확인하겠습니다.

@timsuchanek 신고해 주셔서 감사합니다. 애니메이션이 없으면 느린가요(예: 애니메이션 구성이 없는 <Scheme> )? 더 나빠지면 성능을 위해 애니메이션을 타협할 용의가 있습니다. 나는 안드로이드도 가지고 있지 않다. 그렇지 않으면 내가 직접 시도할 것이다.

Android 4.4에서 예제 앱의 속도가 느려진 것을 확인할 수 있습니다(버튼 클릭에서 경로 변경까지 ~2초 소요). 그리고 exNavigator 예제에는 동일한 문제가 없습니다.

편집 : 크롬 디버깅을 활성화하면 지연이 마술처럼 사라집니다 -__________-

@sbycrosz 탭 막대 또는 모든 페이지에서 느립니까?

오늘 Android에서 이 라이브러리를 테스트했으며 크롬 디버깅을 사용하지 않는 한 제대로 작동하는 것 같습니다.

탭 사이의 '전환' 애니메이션에 지연이 있는 것 같습니다. 조사 중입니다.

탭에서 '스위치'를 테스트했는데 탭을 변경하기에는 약 1.5초 정도로 너무 느립니다. 크롬 디버그를 끄고 라이브 새로고침을 해봤는데 똑같습니다.

최신 버전을 확인할 수 있습니까? 또한 debug.js 내에서 콘솔 로깅의 주석을 제거하고 확인하십시오.

Android 태블릿의 버전 2.3.1에서 예제 앱을 디버그하려고 했습니다. 애니메이션은 매우 느렸습니다.
다음 은 주석 처리되지 않은 debug.js가 있는 콘솔 출력입니다.
또한 간단한 앱(버전 2.3.1 사용)의 릴리스 빌드를 만들고 Samsung 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 사용)의 릴리스 빌드를 만들고 Samsung Galaxy S3에서 실행했습니다. 다시 모든 것이 매우 느렸습니다.
"@exponent/react-native-navigator": "^0.3.5"를 최신으로 업데이트하면 문제가 해결될 수 있습니까?

—
이 이메일에 직접 회신하거나 GitHub에서 확인하세요.

안녕하세요,

저도 느려지는 현상을 겪고 있습니다. 그러나 크롬 디버깅이 활성화되면 더 빠릅니다.
시뮬레이터(Android 및 iOS) 및 물리적 장치의 동작은 크롬 디버깅이 비활성화된 경우와 동일합니다.

어쨌든 문제를 완전히 분리하기 위해 "@exponent/react-native-navigator"를 비활성화할 수 있습니까?

도디

안녕하세요,

나도이 문제가 있었지만 dev 모드를 비활성화하여 해결했습니다.

반응 네이티브 github의 문제는 다음과 같습니다.
https://github.com/facebook/react-native/issues/3049

나는 다른 라우터를 시도했고 그것은 안드로이드에서 정확히 동일했습니다. 데모는
아주 느린. 따라서 react-native-router-flux에 해당하는지 잘 모르겠습니다. :)

토니

르 벤. 26일 2016 à 03:10, doddys [email protected] a écrit :

안녕하세요,

저도 느려지는 현상을 겪고 있습니다. 그러나 크롬 디버깅이
활성화하면 더 빠릅니다.
시뮬레이터(Android 및 iOS)와 물리적 장치의 동작은 동일합니다.
크롬 디버깅이 비활성화 된 경우와 같습니다.

어쨌든 "@exponent/react-native-navigator"를 완전히 비활성화할 수 있습니까?
문제를 격리하려면?

도디

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

안녕하세요,

마침내 내 장치/시뮬레이터에서 느린 이유를 찾았습니다. 나는 내 자신의 실수 때문이었다.
감속기에서 console.log(action)를 수행하고 있었습니다. 그것은 느린 일이 많이 밝혀졌습니다. 특히 장치에서 실행할 때. 크롬 디버깅이 켜져있을 때 훨씬 더 강력한 크롬 자바 스크립트 엔진을 사용하여 실행되기 때문에 괜찮습니다 (노트북 vs 장치).

모든 로그(액션)를 제거한 후 지금이 훨씬 좋습니다.

도디

@doddys 는 나를 위해 작동합니다 👍

@doddys 내 로거 미들웨어에서 console.log를 사용하고 있습니다

나는 이것을 닫을 것이다. 나중에 참조할 수 있도록 redux 미들웨어이든 이 라이브러리의 디버그이든 코드 어디에도 console.log가 없어야 합니다.

안녕하세요.
나는 이것을 경험하고 있다. 나는 프로젝트 전체에서 console.log에 대한 모든 호출을 제거하려고 시도했고, 개발 모드를 끄고, 크롬 디버그를 사용하거나 사용하지 않으려고 시도했습니다. 심지어 릴리스 APK를 빌드하고 react-native-router-flux 데모를 있는 그대로 실행하려고 했습니다. ... 문제는 여전히 지속됩니다.
전환은 잠시 동안 괜찮아 보일 수 있지만 앞뒤로 이동하여 내비게이터에 스트레스를 주면 앱이 결국 느려지고 때로는 정지되기도 합니다.
해결 방법을 설명하는 관련 react-native 문제 https://github.com/facebook/react-native/issues/3049#issuecomment -143505930에 대한 의견이 있습니다.
Android 성능에 ​​대한 React Native 공식 노트에서 이 해결 방법도 언급되어 있습니다. https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
어떻게 든 react-native-router-flux에 InteractionManager 해결 방법을 통합할 수 있습니까?
그때까지는 Android 기기에서 모듈을 실제로 사용할 수 없다는 생각이 듭니다. 정말 안타까운 일입니다.

나는 실제 Android 장치와 시뮬레이터로 오늘 현재 업데이트된 예제를 시도하고 있었는데 단순히 사용할 수 없었습니다.
최신 react-native "react-native": "^0.25.1", 를 사용하기 위해 package.json 를 업데이트하려고 시도했는데 이제 꽤 원활하게 실행됩니다.

실제 Android 기기에서 실행할 때
USB에 연결하면 다음을 실행해야 합니다.
명령줄에서.

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

"JS 개발 모드 끄기

"JS Dev Mode"를 끄 거나 그렇지 않으면
장치에서 고통스럽게 느리게 실행됩니다.

"react-native run-android"를 실행한 후 장치를 "흔들어야" 합니다.
메뉴를 불러옵니다. "개발자 설정"을 선택한 다음 "JS 개발 모드"를 선택 취소하십시오.

그 후에 "react-native run-android"를 다시 실행하면 더 많아야 합니다.
성능, 적어도 나는 당신을 바랍니다 :)

위의 사항은 해결되지 않았습니다. 내 Nexus 6이 실행 속도가 매우 느려 디버그에서 사용할 수 없습니다.
안드로이드 버전을 디버깅하는 방법을 누가 알 수 있습니까?
문제는 오랫동안 해결되지 않습니다 ...

넥서스 5x의 경우도 수정되지 않았습니다.

RN(https://github.com/facebook/react-native/pull/10289)에서 NavigationExperimental을 업데이트하여 이 문제를 해결해야 하는 JS 스레드에서 애니메이션을 오프로드하는 pull 요청이 있는 것 같습니다.

그러나 react-native-router-flux는 더 이상 사용되지 않는 파일(예: NavigationAnimatedView가 이제 NavigationTransitioner임)이 있는 NavigationExperimental(react-native-navigation-experimental)의 분기된 버전을 사용하므로 업데이트할 가치가 있을 것입니다.

@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 이미지가 꽤 많지만 다행히 화면 하단에 렌더링되므로 사용자가 보려면 스크롤해야 합니다. 따라서 해당 svgs 렌더링을 지연하는 것만으로도 성능에 큰 영향을 미쳤습니다(초기에는 약 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 구성 요소의 lighweight 버전 (렌더링할지 여부를 말해 줄 것이다 partialRender = true ) 또는 모든 것을 렌더링하기 위해 ( partialRender = false ).

전환에 기본 애니메이션을 사용하는 Facebook의 새로운 "공식" 내비게이터는 https://reactnavigation.org/ 를 참조

@Jickelsen 얼마나 공식적입니까?

@adambene은 협력자 목록을 확인합니다.

Chrome 디버거를 끄면 모든 것이 빨라집니다. :)

@doddys 당신은 훌륭한 사람입니다! 그거 알아?

@doddys 고마워요, 당신은 하루를 구했습니다!

해결되지 않은

"반응 네이티브 라우터 플럭스": "4.0.6",