React Native with MobX — 入门

众成翻译 · 掘金 · · 2018-08-10 08:05

正文

在这里，我们将结合MobX和React Native来创建一个简单的列表应用程序。如果您正在寻找如何开始使用MobX和React Native，那么这应该是一个很好的选择。

想学习React Native？查看 React Native Training _._

要查看最终仓库，请单击这个 .

MobX是一个非常直观的状态管理库，我很容易掌握并启动和运行。我在开发React和React Native应用程序时使用了Flux，Alt，Redux和Reflux，我可以毫无疑问地说MobX很快成为我最喜欢的管理状态的方法，因为它很简单。我期待在未来的项目中使用它，看看项目从何处开始。

这个应用程序将有两个主要组件，一个允许我们创建新列表，另一个允许我们在列表中添加新项目。

首先，我们首先需要创建一个新的React Native应用程序：

react-native init ReactNativeMobX

接下来，我们将继续进入我们创建的新目录并安装我们需要的依赖项： mobx 和 mobx-react

npm i mobx mobx-react --save

我们还需要安装一个babel插件，以便我们可以使用ES7装饰器：

npm i babel-plugin-transform-decorators-legacy --save-dev

现在，让我们更新.babelrc文件来配置我们的babel插件：

{  "presets": ["react-native"],  "plugins": ["transform-decorators-legacy"]}

我们只需要设置react-native预设，因为我们正在编写一个自定义的.babelrc文件。我们将react-native预设设置为获取默认配置，然后指定更多在其之前运行的插件（在我们的示例中为transform-decorators-legacy插件）。

现在我们已经配置了项目，我们将开始编写一些代码。

在根目录中，创建一个名为app的文件夹。在应用程序中，创建一个名为mobx的文件夹。在mobx中，创建一个名为listStore.js的文件：

从 mobx 导入 observable - observable 为现有数据结构（如对象，数组和类实例）添加了可观察的功能。这可以通过使用 @ observable 装饰器（ES.Next）或通过调用 observable 或 extendObservable 函数（ES5）来注释类属性来完成。
创建一个新的命名为 ObservableListStore 的类
创建一个可观察的数组叫 list
创建三个要在列表数组上使用的方法
创建 ObservableListStore 的新实例并将其存储在 observableListStore 变量中
导出store

现在我们已经创建了一个store，让我们进入应用程序的index文件并更改入口文件以使用store并添加创建导航。如果您正在为Android开发，那将是 index.android.js 。如果您正在为iOS开发，那将是 index.ios.js :

在我们的index文件中，我们创建了一个基本的导航状态并导入了我们新创建的store。我们在 initialRoute 中将store作为prop传递下来。我们还将我们的初始路由设置为我们尚未创建的组件， App 。我们的 App 组件可以通过props访问store。

在configureScene中，我们检查类型是否为“Modal”，如果是，我们调用floatFromBottom sceneConfig，它将我们的下一个场景作为modal。

现在，让我们创建App组件。这将是一个相当大的组件，并在将来包含很多，但基本上我们正在创建一个用户界面，允许我们添加和删除列表项。我们将通过props从我们的store访问我们的store提供方法，并将使用它们与我们的应用程序状态进行交互。在 app / App.js 中：

我将尝试回顾一下这个文件中可能不明显的所有主要内容。如果您有任何问题或有些问题不明确，请发表评论，我会尝试更新或回复。

我们从 mobx-react/native 导入 observer
我们用 @ observer 装饰器装饰我们的类。这将确保在相关数据更改时每个组件单独重新渲染。
我们导入一个尚未创建的组件 - NewItem 。当我们想要将新项目添加到列表中时，这将是我们导航到的组件。
在 addListItem 中，我们调用 this.props.store.addListItem 传入 this.state.text 。 this.state.text 将在附加到TextInput的 updateText 方法中更新。
在 removeListItem 我们调用 this.props.store.removeListItem 然后传递他们
在 addItemToList 中，我们调用this.props.navigator.push并将item和store作为props传递。
在render方法中，我们通过从props中解构来访问store：

const { list } = this.props.store

8. 在render方法中，我们还创建了一个ui并连接了我们的类方法。