这个世界会好吗

React Native with MobX — 入门

原文链接: medium.com

在这里,我们将结合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

接下来,我们将继续进入我们创建的新目录并安装我们需要的依赖项: mobxmobx-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的文件:

  1. mobx 导入 observable - observable 为现有数据结构(如对象,数组和类实例)添加了可观察的功能。 这可以通过使用 @ observable 装饰器(ES.Next)或通过调用observableextendObservable 函数(ES5)来注释类属性来完成。

  2. 创建一个新的命名为ObservableListStore的类

  3. 创建一个可观察的数组叫 list

  4. 创建三个要在列表数组上使用的方法

  5. 创建 ObservableListStore 的新实例并将其存储在 observableListStore 变量中

  6. 导出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 中:

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

  1. 我们从mobx-react/native导入observer

  2. 我们用 @ observer 装饰器装饰我们的类。 这将确保在相关数据更改时每个组件单独重新渲染。

  3. 我们导入一个尚未创建的组件 - NewItem 。 当我们想要将新项目添加到列表中时,这将是我们导航到的组件。

  4. addListItem 中,我们调用 this.props.store.addListItem 传入 this.state.textthis.state.text 将在附加到TextInput的 updateText 方法中更新。

  5. removeListItem 我们调用 this.props.store.removeListItem 然后传递他们

  6. addItemToList 中,我们调用this.props.navigator.push并将item和store作为props传递。

  7. 在render方法中,我们通过从props中解构来访问store:

const { list } = this.props.store

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

最后,我们创建NewItem组件:

如果你熟悉React或React Native,那么这里没什么特别之处。 我们基本上可以使用props访问我们的项目并循环遍历项目的项目数组,如果其中存在任何项目。 如果没有,我们会显示一条消息。

我们在这个组件中与store交互的唯一方法是调用addItem,它调用 this.props.store.addItem 并传入 this.props.item和this.state.newItem

那应该是它!

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

我的名字是Nader Dabit的开发人员倡导者,负责AppSyncAmplify等项目,以及React Native Training的创始人。

如果您喜欢React和React Native,请查看我们的播客 — React Native RadioDevchat.tv

另外,看看我的书, React Native in Action 现在可从Manning Publications获得

如果您喜欢这篇文章,请推荐并分享! 谢谢你抽时间阅读