使用 BaaS 工具 与 React Native 构建原生应用

"
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 Native: Bringing modern web techniques to mobile

• React 官网

• React 文档

  • Getting Started

  • Tutorial

  • Thinking in React

• LeanCloud JavaScript SDK 开发指南

安装

首先，按照 React Native 文档 配置开发环境、生成项目脚手架。这一步完成时，你应该能运行文档中的「AwesomeProject」或者本身的项目。
而后，在项目的根目录下运行如下命令，安装 LeanCloud SDK：

npm install avoscloud-sdk@^1.0.0-rc5 --save

最后在 JavaScript 入口文件（通常是 index.(ios|android).js）中引入 SDK 并初始化：

var AV = require('avoscloud-sdk');  
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 解耦了视图（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 来组织应用的数据流。

• 使用咱们 JavaScript SDK 中新的异步用户 API。

• 重用代码，实现平台差别化。

图片上传

React Native 提供了 CameraRoll API 来访问用户的照片，与 JavaScript SDK 的文件上传功能配合使用很是简单，只须要将 CameraRoll.getPhotos() 获取到的 image 做为 blob 参数传给 AV.File 的构造函数便可：

CameraRoll.getPhotos({  
 first: 1  
}, (data) => {  
 var edge = data.edges[0];  
 var image = edge.node.image;  
 var file = new AV.File('image.jpg', {  
   blob: image  
 });  
 file.save()  
   .then(  
     () => console.log('图片上传成功'),  
     (err) => console.log('图片上传失败', err)  
   );  
}, console.log);

图片上传的完整 Demo：https://github.com/leancloud/react-native-image-upload-demo

须要注意的几点：

• CameraRoll 模块使用前须要先 link，具体操做步骤参见 Linking Libraries。

• 图片的读取与发送是直接在 Native 中完成的，并不会出现大量数据在 Native > JS > Native 之间传递，没必要担忧此类性能问题。

• CameraRoll 的 Android 实现尚未开源，在 Android 中调用会报错。

推送

推送是原生应用最多见的功能之一。对于客户端，主要须要实现「注册设备」与「响应推送」两个功能。React Native for iOS 也能够与 LeanCloud 的推送服务配合使用，而且几乎不须要写 Objective-C 或 Swift 代码。
使用推送服务的完整 Demo：https://github.com/leancloud/react-native-installation-demo。使用 JavaScript SDK 以及 installation 插件来注册设备、响应推送的详细步骤参见 其源码分析。

你们还想用 React Native 与 LeanCloud SDK 实现哪些经常使用的功能呢？欢迎留言告诉咱们。