Question

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

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

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

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

Answer 1

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

我知道两个状态管理库。

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

Redux 是在React中管理全局和持久状态的规范方法。它在很多方面与RxJS不同。首先，您在整个应用程序中只有一个Redux存储，其中包含整个全局状态。其次，Redux以Flux为模型，并且首次设置各种“玩家”可能是一个非常复杂的过程（但是一旦获得，就很容易了）。我强烈建议使用combineReducers函数来简化设置。第三，redux不能直接管理异步数据，如果您有异步数据流，则需要联系redux-thunk。

由于它是如何集成的，Redux仍然是我对全局和持久状态做出反应的首选。有一个名为react-redux的库，可以很好地集成这两个库。它为您提供了一个名为connect的函数。 connect函数访问您的全局状态，并将其作为道具传递给您的组件。

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

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

然后，您的各个组件可以使用connect访问状态。 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>
        )
}

然后，您使用connect函数在组件上调用mapStateToProps，请记住

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

您会看到这是如何注入道具的，就像您写过的

<Component stateVariable={state.variable} />

通过这种方式，它是prop-drilling

的解决方案

此外，您可以使用redux-persist来保持会话之间的状态，而不仅仅是安装/卸载组件。该库访问Web上的localStorage或本机上的asyncStorage。

在组件上调用connect时，会自动传递一个名为dispatch的属性。分派是一项用于分派对本地商店进行编辑的操作的功能。正如我所说的，系统需要进行一些设置-您必须创建常量，操作创建者和简化器来管理这些操作调度。如果您观看本课程的前8部视频，您将https://egghead.io/courses/getting-started-with-redux

顺利进行

此时，我的建议是将Redux与React一起使用。

卸载视图时防止丢失状态

1 个答案: