使用 mapbox 的移动性能

Question

我正在尝试将 Mapbox ( https://github.com/mapbox/react-native-mapbox-gl ) 与 React-Native、React Redux 和 Flux Navigation 结合使用。

我在模块化中构建了我的应用程序，其中我有一个模块搜索和映射。它的结构如下：

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

在 SearchResults.js 中，我得到 10 个结果，这些结果显示有图像和文本。结果存储在我的 redux 商店中。我在 Map.js 和 SearchResults.js 中有 2 个按钮，可以在两个容器之间进行导航（通过 Flux 导航 Action.Map() 和 Action.SearchResults() 向前和向后）。

在 Map.js 中，我正在更新地图状态以从 searchResult 存储中接收经度和纬度。我现在面临的问题是，如果我在 SearchResults 和 Map 之间前后切换，会出现大量性能问题。发生这种情况是因为地图总是被重新渲染。

我试图找到使用 React 生命周期方法的解决方法，但这没有帮助。我认为这是无用的，因为我在 2 个模块之间导航。

防止 Map.js 始终重新呈现的最佳方法是什么？

Answer 1

我认为这就是 type 关键字在您的 Scene 定义中的用途。根据 react-native-router-flux 的 documentation：

Scene type

Defines how the new screen is added to the navigator stack. One of push, jump, replace, reset. If parent container is tabbar (tabs=true), jump will be automatically set.

并且如果我们查看 React Native 官方 Navigator documentation 我们了解到场景之间的跳转允许我们在不卸载的情况下切换屏幕。

默认情况下，react-native-router-flux 使用 push 来卸载你的场景。

我没有亲自尝试过，但我认为应该可以。

使用 mapbox 的移动性能

mobile performance using mapbox

react-native

mapbox

react-redux

mapbox-gl-js