我的应用程序使用react-navigationDrawerNavigator 组件来允许用户在应用程序内的各个屏幕中导航。
我的react-native-maps MapView 组件嵌套在可通过DrawerNavigator 访问的屏幕内。
我发现的问题是，如果您导航到应用程序中的另一个页面，然后导航回地图页面，则必须重新加载整个地图，并且之前的标记/地图配置会丢失。
有没有一种方法可以在导航离开时阻止屏幕卸载，或者有其他方法可以阻止整个地图重置？我不会在下面发布代码，因为我认为这个问题更多是基于理论而不是修复代码错误。
【问题讨论】：
标签： react-native react-navigation react-native-maps
您需要在组件卸载时保持状态。你需要一个状态管理库。
我知道两个状态管理库。
RxJS 是推荐用于 Angular 的库。即使它不是由 Angular 开发的，如果您使用 Angular CLI 引导项目，它仍然默认安装。这个库非常强大，尤其是在处理异步数据流时，它非常适合 Angular DI 系统。我的理解是您创建单例服务来管理全局状态的特定部分。您可以为应用程序的不同部分提供许多 RxJS 服务。然后，您的组件可以利用这些服务并从中获取状态信息。有一些库可以帮助您将 RxJS 与 react 组件集成，但我无法证明它们的价值。
Redux 是在 React 中管理全局和持久状态的规范方法。它在很多方面与 RxJS 不同。首先，您的整个应用程序中只有一个 redux 存储，它包含整个全局状态。其次，Redux 以 Flux 为蓝本，第一次设置各种“玩家”可能是一个非常复杂的过程（但一旦你掌握了它就很容易）。我强烈建议使用combineReducers 函数来简化设置。第三，redux 不直接管理异步数据，如果你有异步数据流，你需要联系redux-thunk。
Redux 仍然是我在 react 中的全局和持久状态的首选，因为它是如何集成的。有一个名为react-redux 的库很好地集成了这两个库。它为您提供了一个名为connect 的函数。 connect 函数访问您的全局状态并将其作为道具传递到您的组件中。
您将整个应用程序包装在商店提供商行中
export default () => {
<Provider store={store}>
<App />
</Provider>
然后您的各个组件可以使用连接访问状态。 connect 接受一个为您提取部分状态的函数。该函数可能如下所示。
const mapStateToProps = state => {
return {
stateVariable: state.variable
}
现在您知道您的组件将收到一个名为stateVariable 的道具，它是您的全局存储/状态中variable 的值。所以你可以编写你的组件来接受这个道具
class Component extends React.Component {
render() {
var { stateVariable} = this.props;
return (
<View>
<Text>{stateVariable}</Text>
</View>
)
}
然后，您使用 mapStateToProps 函数在您的组件上调用 connect，然后就可以了
const ConnectedComponent = connect(mapStateToProps)(Component)
export { ConnectedComponent as Component }
你会看到它是如何注入道具的，就像你写的一样
<Component stateVariable={state.variable} />
这样就解决了prop-drilling
此外，您可以使用redux-persist 在会话之间保持状态，而不仅仅是安装/卸载组件。该库访问 web 上的 localStorage 或原生的 asyncStorage。
当您在组件上调用 connect 时，会自动传入一个名为 dispatch 的 prop。 Dispatch 是一个函数，用于调度对本地商店进行编辑的操作。正如我所说，系统需要进行一些设置——您必须创建常量、动作创建者和减速器来管理这些动作调度。如果您观看本课程的前 8 个视频，您将会顺利完成https://egghead.io/courses/getting-started-with-redux
目前我的建议是使用 Redux 和 React。
【讨论】：