使用 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 實現哪些經常使用的功能呢？歡迎留言告訴咱們。