ReactNative 组件之间共享数据云端存储

最新推荐文章于 2024-05-21 09:49:37 发布

2401_84009993

最新推荐文章于 2024-05-21 09:49:37 发布

阅读量590

点赞数 11

分类专栏：程序员文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/2401_84009993/article/details/137201639

版权

程序员专栏收录该内容

247 篇文章 0 订阅

订阅专栏

安装

–

首先，按照 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 来组织应用的数据流。
使用我们 JavaScript SDK 中新的异步用户 API。
重用代码，实现平台差异化。

图片上传

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

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后

希望大家能有一个好心态，想进什么样的公司要想清楚，并不一定是大公司，我选的也不是特大厂。当然如果你不知道选或是没有规划，那就选大公司！希望我们能先选好想去的公司再投或内推，而不是有一个公司要我我就去！还有就是不要害怕，也不要有压力，平常心对待就行，但准备要充足。最后希望大家都能拿到一份满意的 offer ！如果目前有一份工作也请好好珍惜好好努力，找工作其实挺累挺辛苦的。