与 MobX State Tree 集成

注意

本指南尚未完善。请通过发送拉取请求来帮助改进它。

本指南探讨了在使用 MobX State Tree(MST) 进行状态管理的 React Native 项目中使用 React Navigation 的可能方法。本指南附带一个 示例应用程序。本指南的某些部分可能也与 MobX 用户相关，但请注意，MobX 没有内置的解决方案来 (反) 序列化其状态。

注意

请注意，在本指南中，Mobx State Tree 未用于管理导航状态本身，仅管理导航参数！

概述

本指南的目标是将 MST 与 React Navigation 结合使用，以实现最佳的开发体验。在本指南的范围内，这意味着允许我们进行完整的 JS 重新加载，并返回到重新加载之前的状态。

我们将通过使用 React Navigation 的 内置机制 持久化 导航状态 来实现这一点。我们还需要持久化应用程序状态和导航参数 - 这样，当您在应用程序中处理屏幕并进行完整的 JS 重新加载时，您将被带回到同一个屏幕，并带有相同的数据。

指南

首先，从创建初始导航结构和 React 组件开始。完成之后，继续在 MST 中建模您的状态。如果您想了解更多关于这方面的信息，请查看 egghead.io 课程。

此时，您可能想知道如何将 MST 对象与组件连接起来。答案在于 mobx-react 包，其中包含 MobX 的 React 绑定（它们也适用于 MST）。您可能需要使用 Provider 组件以及 inject 和 observer 函数。

使用 Provider 来包装您从根组件的渲染方法中返回的内容

<Provider myObject={this.myObject}>
  <NavigationContainer>{/* Screen configuration */}</NavigationContainer>
</Provider>

这将允许您通过 inject 函数从应用程序中的任何 React 组件访问 myObject，这非常有用。

使用 observer 函数来包装所有渲染可观察数据的组件。这将确保组件在它们渲染的数据发生变化时重新渲染。

导航参数

应用程序中的屏幕通常依赖于参数。React Navigation 允许您从一个屏幕 发送参数 到另一个屏幕。这些参数存储在导航状态中。但是，为了持久化导航状态，它需要是可序列化的。此要求与 MST 不太兼容，因为 MST 对象是复杂对象，React Navigation 不知道如何对其进行 (反) 序列化。在本指南中，我们将通过自己存储导航参数来解决这个问题。

这意味着我们不再将参数从一个屏幕发送到另一个屏幕（例如，使用 props.navigation.navigate('MyScreen', { complexMSTObject })），而是将参数存储到导航存储中，然后在不发送任何参数的情况下进行导航，并在目标屏幕上从导航存储中获取参数。

举个例子，导航存储可能看起来像这样

import { types, onSnapshot, getRoot } from 'mobx-state-tree';
import { Product } from '../models/Product';
import { User } from '../models/User';

export const NavigationStore = types
  .model('NavigationStore', {
    productDetailScreenParams: types.map(
      types.model('ProductDetailScreenParams', {
        product: types.optional(types.safeReference(Product)),
      })
    ),
    userProfileScreenParams: types.model('UserProfileScreenParams', {
      user: types.maybe(types.safeReference(User)),
    }),
  })
  .actions(self => ({
    ...
  }));

请注意，userProfileScreenParams 是一个简单的模型，包含一个 user 条目，而 productDetailScreenParams 是一个 ProductDetailScreenParams 模型的映射。我们选择这种数据形状的原因是，我们的应用程序中只有一个用户资料屏幕，它从 userProfileScreenParams 中读取其参数。productDetailScreenParams 是一个映射，因为应用程序可以在堆栈中拥有多个产品屏幕。每个屏幕都指向映射中保存的 Product 实例。映射中的键是 React Navigation 的 键：可以将 key 视为路由的标识符。

您的导航存储也可以只是一个映射，其中每个屏幕（无论它是产品屏幕还是用户资料屏幕）都存储其导航参数。这是 示例应用程序 中采用的方法。

总结

• 您可以在 React Native 应用程序中将 React Navigation 与 MobX State Tree 一起使用
• 使用 Provider 组件以及 inject 和 observer 函数将 MobX 或 MST 与 React 连接起来
• 可以持久化整个应用程序状态并在 JS 重新加载时恢复它