卸载视图时防止状态丢失

Question

我的应用程序使用 react-navigation DrawerNavigator 组件来允许用户在应用程序内浏览各种屏幕。

我的 react-native-maps MapView 组件嵌套在可通过 DrawerNavigator.

访问的屏幕中

我发现的问题是，如果您导航到应用程序中的另一个页面，然后导航回地图页面，则必须重新加载整个地图，并且之前的 markers/map 配置会丢失。

有什么方法可以防止导航离开时屏幕卸载，或者有其他方法可以阻止整个地图重置吗？我不会 post 下面的代码，因为我认为这个问题更多的是基于理论，而不是修复代码错误。

Answer 1

您需要在卸载组件时保持状态。你需要一个状态管理库。

我知道两个状态管理库。

RxJS 是推荐用于 Angular 的库。即使它不是由 Angular 开发的，如果您使用 Angular CLI 到 bootstrap 项目，它仍然默认安装。这个库非常强大，尤其是在处理异步数据流方面，它非常适合 angular DI 系统。我的理解是您创建单例服务来管理全局状态的特定部分。您可以为应用程序的不同部分提供许多 RxJS 服务。然后，您的组件可以利用这些服务并从中获取状态信息。有一些库可以帮助您将 RxJS 与 React 组件集成，但我无法证明它们的价值。

Redux 是 React 中管理全局和持久化状态的规范方式。它在许多方面与 RxJS 不同。首先，您的整个应用程序中只有一个 redux store，它包含整个全局状态。其次，Redux 以 Flux 为蓝本，第一次设置各种 'players' 可能是一个非常复杂的过程（但一旦掌握它就很容易）。我强烈建议使用 combineReducers 函数来简化设置。第三，redux 不能直接管理异步数据，如果你有异步数据流，你将需要达到 redux-thunk。

Redux 仍然是我在 React 中处理全局和持久状态的首选，因为它的集成方式。有一个名为 react-redux 的库，它很好地集成了这两个库。它为您提供了一个名为 connect 的函数。 connect 函数访问您的全局状态并将其作为 prop 传递到您的组件中。

您将整个应用包装在商店提供商行中，因此

export default () => {
    <Provider store={store}>
        <App />
    </Provider>

然后您的各个组件可以使用连接访问状态。 connect 接受一个为您提取部分状态的函数。该函数可能如下所示。

const mapStateToProps = state => {
    return {
        stateVariable: state.variable
    }

现在您知道您的组件将收到一个名为 stateVariable 的道具，它是您全局商店/状态中 variable 的值。所以你可以编写你的组件来接受这个 prop

class Component extends React.Component {
    render() {
        var { stateVariable} = this.props;
        return (
            <View>
                <Text>{stateVariable}</Text>
            </View>
        )
}

然后您使用 mapStateToProps 函数在您的组件上调用 connect 并且嘿 presto

const ConnectedComponent = connect(mapStateToProps)(Component)
export { ConnectedComponent as Component }

你看这如何像你写的那样注入道具

<Component stateVariable={state.variable} />

这样就解决了prop-drilling

此外，您可以使用 redux-persist 在会话之间保持状态，而不仅仅是 mounting/unmounting 组件。该库访问 web 上的 localStorage 或本机上的 asyncStorage。

当您在组件上调用 connect 时，会自动传入一个名为 dispatch 的道具。调度是一个函数，用于调度对本地商店进行编辑的操作。正如我所说，系统需要一些设置——您必须创建常量、动作创建器和缩减器来管理这些动作调度。如果您观看了本课程的前 8 个视频，您就会顺利上路 https://egghead.io/courses/getting-started-with-redux

目前我的建议是将 Redux 与 React 结合使用。

卸载视图时防止状态丢失

Prevent loss of state when unmounting view

react-native

react-navigation

react-native-maps