图片来源:toptal
React Native 是 Facebook 在今年的 F8 大会上发布的移动应用开发方案。它基于 JavaScript 和 React,可以让 Web 应用开发者在保持原有的开发体验和效率的同时,为 Web 应用带来原生应用的体验。
React Native 使用 JavaScript 作为开发语言,其内建的打包系统支持包括 CommonJS 在内的多种模块化标准,因此很多支持浏览器运行环境的 Node Package 也可以运行在 React Native 中。LeanCloud JavaScript SDK 便是其一。
本文将介绍:
-
如何在 React Native 中使用 Flux 架构来组织应用的数据流,以配合我们的 JavaScript SDK 向 LeanCloud 云端保存数据,重用代码和实现平台差异化。
-
异步获取当前用户对象
-
文件上传
-
向移动端推送消息
在介绍具体内容之前,读者需要先了解和熟悉 React 和 React Native 的基础概念,以及 LeanCloud JavaScript SDK 的基本用法,请参考以下资料:
-
React 文档
安装
–
首先,按照 React Native 文档 配置开发环境、生成项目脚手架。这一步完成时,你应该能运行文档中的「AwesomeProject」或者自己的项目。
然后,在项目的根目录下运行以下命令,安装 LeanCloud SDK:
npm install leancloud-storage --save
最后在 JavaScript 入口文件(一般是 index.(ios|android).js
)中引入 SDK 并初始化:
import AV from ‘leancloud-storage’;
AV.initialize(APP_ID, APP_KEY);
把 APP_ID 和 APP_KEY 替换成实际的应用数据,对应信息在 LeanCloud 的 控制台 / 设置 / 应用 Key 里可以找到。再次运行或刷新应用,如果没有报错的话,说明 LeanCloud SDK 已经正确地加载并执行了。
我们的 实时通讯 SDK 从 2.3.2 版本开始支持 React Native,你可以使用以下命令来安装最新版本的 SDK:
npm install leancloud-realtime --save
数据存储
在 React Native 中使用 LeanCloud SDK 对数据进行增删改查与在浏览器中使用没区别,具体用法请参考 SDK 文档的 「对象」 章节以及 LeanCloudRocks Demo 。接下来讨论的是 React 与 LeanCloud SDK 应该如何配合工作。
LeanCloudRocks 是一个基础 Demo,演示了如何在一个 React 组件中将用户输入的数据保存到云端。在这个 Demo 中,我们简单地将渲染视图、响应用户操作与操作数据封装在一个 React 组件中。随着应用变得复杂,组件之间开始出现需要共享的数据。我们试图将共享数据交给上级组件维护,却发现这会造成组件中充斥了数据与事件的代理逻辑,父子组件开始耦合。组件之间的耦合意味着 React 的优点之一的可预知性(predictablility)会大打折扣。解决这个问题的一个方案是 Flux 架构。
图片来源:Flux
Flux 解耦了视图(View)与数据(Store)。上图展示了 Flux 中的数据流向:视图层不再关心数据的变化,只负责将某一个数据快照渲染为页面,以及触发事件(Action);预先定义好的有限的事件通过 Dispatcher 派发给订阅了事件的数据;数据更新自己,然后通知视图重新渲染。在这个闭环中,React 很好地扮演了视图的角色,而 LeanCloud SDK 工作在数据层。Flux 架构很好地解耦了 React 与 LeanCloud SDK。
用户系统
在 React Native 中使用 SDK 需要特别注意的是,获取当前用户需要使用新增的异步 API:AV.User.currentAsync()
。
AV.User.currentAsync().then((currentUser)=>{
// do something with currentUser;
});
由于 React Native 的 Native JavaScript Bridge 的异步通信机制,React Native 的本地存储相关 API 是异步的。为此,我们新增了该异步 API,并将 SDK 的运行环境分为两种:
-
异步存储环境(React Native)
-
同步存储环境(浏览器、Node)
开发者可以通过 AV.localStorage.async
来做判断。
如果在 异步 存储环境中使用了同步 API 的 AV.User.current()
,SDK 会抛异常。而在 同步 存储环境中使用了同步 API 或异步 API 的 AV.User.currentAsync()
则都不会有问题。换句话说,如果你不确定你的代码会在哪里运行,使用异步 API 总是安全的 。
下面介绍一个稍复杂的 Demo:LeanTodo。
LeanTodo 是一个使用 LeanCloud SDK 与 React Native 构建的 Todo 应用,支持 iOS 与 Android,通过这个 Demo 你可以学到:
-
在 React Native 中使用我们的 JavaScript SDK 对数据进行增删改查。
-
使用 Flux 来组织应用的数据流。
最后
文章不易,如果大家喜欢这篇文章,或者对你有帮助希望大家多多点赞转发关注哦。文章会持续更新的。绝对干货!!!
- Android进阶学习全套手册
关于实战,我想每一个做开发的都有话要说,对于小白而言,缺乏实战经验是通病,那么除了在实际工作过程当中,我们如何去更了解实战方面的内容呢?实际上,我们很有必要去看一些实战相关的电子书。目前,我手头上整理到的电子书还算比较全面,HTTP、自定义view、c++、MVP、Android源码设计模式、Android开发艺术探索、Java并发编程的艺术、Android基于Glide的二次封装、Android内存优化——常见内存泄露及优化方案、.Java编程思想 (第4版)等高级技术都囊括其中。
-
Android高级架构师进阶知识体系图
关于视频这块,我也是自己搜集了一些,都按照Android学习路线做了一个分类。按照Android学习路线一共有八个模块,其中视频都有对应,就是为了帮助大家系统的学习。接下来看一下导图和对应系统视频吧!!!
-
Android对标阿里P7学习视频
- BATJ大厂Android高频面试题
这个题库内容是比较多的,除了一些流行的热门技术面试题,如Kotlin,数据库,Java虚拟机面试题,数组,Framework ,混合跨平台开发,等
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
这个题库内容是比较多的,除了一些流行的热门技术面试题,如Kotlin,数据库,Java虚拟机面试题,数组,Framework ,混合跨平台开发,等
[外链图片转存中…(img-W5Zbbv4G-1715907178753)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!