使用 BaaS 工具 与 React Native 构建原生应用
本文将介绍:
在介绍具体内容之前,读者需要先了解和熟悉 React 和 React Native 的基础概念,以及 LeanCloud JavaScript SDK 的基本用法,请参考以下资料:
安装首先,按照 React Native 文档 配置开发环境、生成项目脚手架。这一步完成时,你应该能运行文档中的「AwesomeProject」或者自己的项目。 npm install avoscloud-sdk@^1.0.0-rc5 --save 最后在 JavaScript 入口文件(一般是 var AV = require('avoscloud-sdk'); AV.initialize(APP_ID,APP_KEY); 把 APP_ID 和 APP_KEY 替换成实际的应用数据,对应信息在 LeanCloud 的 控制台 / 设置 / 应用 Key 里可以找到。再次运行或刷新应用,如果没有报错的话,说明 LeanCloud SDK 已经正确地加载并执行了。 npm install leancloud-realtime --save 数据存储在 React Native 中使用 LeanCloud SDK 对数据进行增删改查与在浏览器中使用没区别,具体用法请参考 SDK 文档的「对象」 章节以及 LeanCloudRocks Demo 。接下来讨论的是 React 与 LeanCloud SDK 应该如何配合工作。
Flux 解耦了视图(View)与数据(Store)。上图展示了 Flux 中的数据流向:视图层不再关心数据的变化,只负责将某一个数据快照渲染为页面,以及触发事件(Action);预先定义好的有限的事件通过 Dispatcher 派发给订阅了事件的数据;数据更新自己,然后通知视图重新渲染。在这个闭环中,React 很好地扮演了视图的角色,而 LeanCloud SDK 工作在数据层。Flux 架构很好地解耦了 React 与 LeanCloud SDK。 用户系统在 React Native 中使用 SDK 需要特别注意的是,获取当前用户需要使用新增的异步 API: AV.User.currentAsync().then((currentUser)=>{ // do something with currentUser; }); 由于 React Native 的 Native JavaScript Bridge 的异步通信机制,React Native 的本地存储相关 API 是异步的。为此,我们新增了该异步 API,并将 SDK 的运行环境分为两种:
如果在异步存储环境中使用了同步 API 的 LeanTodo 是一个使用 LeanCloud SDK 与 React Native 构建的 Todo 应用,支持 iOS 与 Android,通过这个 Demo 你可以学到:
图片上传React Native 提供了 CameraRoll API 来访问用户的照片,与 JavaScript SDK 的文件上传功能配合使用非常简单,只需要将 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 需要注意的几点:
推送推送是原生应用最常见的功能之一。对于客户端,主要需要实现「注册设备」与「响应推送」两个功能。React Native for iOS 也可以与 LeanCloud 的推送服务配合使用,并且几乎不需要写 Objective-C 或 Swift 代码。 大家还想用 React Native 与 LeanCloud SDK 实现哪些常用的功能呢?欢迎留言告诉我们。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- flexpaper 参数
- React Native填坑之旅--ListView篇
- c# – MVC3 SelectListItem.是否可以使用自定义html属性来装
- Send ActionScript Worker Messages 6x Faster With Mutex
- ruby-on-rails – 截断Markdown?
- React+Redux工程目录结构划分
- Oracle DBA的PostgreSQL学习之路
- 通过Ajax实现不显示登录框的IIS-Windows集成身份验证登录
- 如何使用带有rails 3.1资产管道和coffeescript的dojo工具包
- cocos2d-x 如何制作一个类马里奥的横版平台动作游戏 1 献给