使用 LeanCloud 與 React Native 構建原生應用

React Native 是 非死book 在今年的 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 文檔 配置開發環境、生成項目腳手架。這一步完成時，你應該能運行文檔中的「AwesomeProject」或者自己的項目。

然后，在項目的根目錄下運行以下命令，安裝 LeanCloud SDK：

npm install avoscloud-sdk@^1.0.0-rc5

最后在 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

數據存儲

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