React Native with MobX — 入门

2018-08-11 admin

在这里,我们将结合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](/go/?target=https%3A%2F%2Ftwitter.com%2Fdabit3%EF%BC%89%E6%88%91%E6%98%AF%5BAWS%20Mobile%5D(https%3A%2F%2Faws.amazon.com%2Fmobile%2F)的开发人员倡导者,负责AppSyncAmplify等项目,以及React Native Training的创始人。

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

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

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

原文链接:https://www.zcfy.cc/article/react-native-with-mobx-getting-started

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37712.html

文章标题:React Native with MobX — 入门

相关文章
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
Windows系统下Node.js的简单入门教程
随着近日Paypal和Netflix宣告 迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP...
2017-03-24
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
理解JavaScript的变量的入门教程
变量是用于存储信息的容器: 还记得在学校里学过的代数吗? 当您回忆在学校学过的代数课程时,想到的很可能是:x=5, y=6, z=x+y 等等。 还记得吗,一个字母可以保存一个值(比如 5),并且可以使用上面的信息计算出 z 的值是 11。...
2017-03-27
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
超级给力的JavaScript的React框架入门教程
React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM,用 DOM 的方式将需要的组件秒加,用不着的秒删。React 扮演着 MVC 结构中 V 的角色, 不过你要是 Flux 搭配使用, 你就有...
2017-03-27
AngularJS快速入门
怎么样快速了解AngularJS? 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景、工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看...
2017-03-22
JavaScript 事件入门知识
JavaScript事件是由访问Web页面的用户引起的一系列操作; 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一 事件介绍 事件一般是用于浏览器和用户操作进行交互;最早是IE和Netscape Navigator中出现...
2017-03-22
JavaScript的RequireJS库入门指南
简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景。 异步模块...
2017-03-27
回到顶部