지도 상자를 사용하는 모바일 성능

Question

지도 상자 (https://github.com/mapbox/react-native-mapbox-gl)를 React-Native, React Redux 및 Flux Navigation과 함께 사용하려고합니다.

단일 모듈 검색 및 맵을 사용하는 모듈 식으로 응용 프로그램을 구성했습니다. 다음과 같이 구성되어 있습니다.

/modules 
    /search 
     /containers 
      SearchResults.js 
    /map 
     /containers 
      Map.js 

In SearchResults.js에서 이미지와 텍스트로 표시되는 10 개의 결과가 표시됩니다. 결과는 내 redux 저장소에 저장됩니다. Map.js 및 SearchResults.js에 두 개의 버튼이 있습니다.이 버튼을 사용하면 Flux 탐색 Action.Map() 및 Action.SearchResults()를 통해 앞뒤로 이동할 수 있습니다.

Map.js에서 searchResult 저장소에서 경도와 위도를 수신하도록 맵 상태를 업데이트하고 있습니다. 내가 직면 한 문제는 SearchResults와 Map forward and backwards 사이를 전환하면 막대한 성능 문제가 있다는 것입니다. 이것은 맵이 항상 다시 렌더링되기 때문에 발생합니다.

반응 라이프 사이클 방법을 사용하여 해결 방법을 찾으려고 시도했지만 도움이되지 않았습니다. 나는 2 개의 모듈 사이를 탐색하기 때문에 이것이 쓸모 없다고 생각한다.

Map.js가 항상 다시 렌더링되는 것을 방지하는 가장 좋은 방법은 무엇입니까?

Answer 1

Scene 정의에 type이라는 키워드가 있다고 생각합니다. documentation의 반응에 따르면 네이티브 라우터 플럭스 :

새로운 화면이 탐색 스택에 추가되는 방법을 정의

장면 타입. 중 하나가 누름, 점프, 바꾸기, 재설정. 상위 컨테이너가 tabbar (탭 = true)이면 점프가 자동으로 설정됩니다.

그리고 우리는 우리가 장면 사이에 점프하는 것은 우리가 마운트 해제하지 않고 화면을 변경할 수 있습니다 것을 알게 기본 공식 Navigator documentation 반응을 보면.

기본적으로 react-native-router-flux는 push를 사용하여 장면을 마운트 해제합니다.

나는 혼자 시도하지 않았지만 제대로 작동해야한다고 생각합니다.