react-native - 卸载 View 时防止状态丢失

Question

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

我的 react-native-maps MapView组件嵌套在可通过 DrawerNavigator 访问的屏幕内.

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

有没有办法可以在导航时阻止屏幕卸载，或者有其他方法可以阻止整个 map 重置？我不会在下面发布代码，因为我认为这个问题更多是基于理论而不是修复代码错误。

Answer 1

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

我知道两个状态管理库。

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

还原 是在 React 中管理全局和持久状态的规范方法。它在很多方面与 RxJS 不同。首先，您的整个应用程序中只有一个 redux 存储，它包含整个全局状态。其次，Redux 以 Flux 为蓝本，第一次设置各种“玩家”可能是一个非常复杂的过程(但一旦你掌握了它就很容易)。我强烈推荐使用 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 的 prop。这是 variable 的值在您的全局商店/州。所以你可以编写你的组件来接受这个 Prop

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

然后您调用 connect在您的组件上使用 mapStateToProps功能和嘿presto

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

您会看到它是如何注入(inject) Prop 的，就像您写的一样

<Component stateVariable={state.variable} />

这样就解决了 prop-drilling

此外，您可以使用redux-persist在 session 之间保持状态，而不仅仅是安装/卸载组件。此库访问 web 上的 localStorage 或 native 上的 asyncStorage。

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

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