在原生 React Native 应用中使用 Expo API使用指南_api基础知识

注: 本文最初于 2019 年 2 月 28 日发布,随后于 2019 年 3 月 14 日更新,以反映 Workflow 的改进。从今天开始,你可以在任何 React Native 应用程序中使用尽可能少或尽可能多的 Expo SDK。 我们已经花了很多时间构建和维护这些包含原生应用特性的跨平台 API,我们很高兴最终实现了向整个 React Native

在原生 React Native 应用中使用 Expo API使用指南

从今天开始,你可以在任何 React Native 应用程序中使用尽可能少或尽可能多的 Expo SDK。 我们已经花了很多时间构建和维护这些包含原生应用特性的跨平台 API,我们很高兴最终实现了向整个 React Native 生态共享这些 API,并将它们作为一个整体继续优化。

在原生 React Native 应用中使用 Expo API使用指南_api基础知识

Expo 未来的两个主要的工程流分别是 Managed 和 Bare。 Managed 应用程序是通过 expo-cli、移动设备上的 Expo 客户端和我们的各种服务: Push Notifications、构建服务和 无线(OTA)更新 构建的。 Expo 试图尽可能多地为你管理构建应用程序的复杂性,所以我们称之为 Managed Workflow。 另一方面,Bare 应用程序将所有的控制权(以及随之而来的复杂性)交给了开发人员。

我们称这个初始版本为预览版,因为还它没有我们希望的那样足够简化,但是我们希望尽快把这些功能交到用户手中,因为它们已经是一个很大的改进了。

Introducing Unimodules

React Native 包一般都是小的整体。 如果他们需要与 Filesystem 或 Permissions 进行交互,不同的包将以各自的方式实现这个逻辑。 其结果是导致用户需要做不必要的重复工作、处理 bug 以及各种修改。

因为 Expo 最初是作为一个整体建立的,所以自然而然地,我们为 API 的这些基本构建块建立并依赖于一个更通用的解决方案。 当涉及到将 Expo 拆分以使开发人员能够按需挑选 SDK 的部分时,我们面临一个决定: 退一步,在每个模块中提供这些构建块的特殊实现? 或者构建一个允许模块之间干净利落地交互的工具?

这项工作的成果是一个名为 Unimodules 的项目。 Unimodules 是一个 toolchain(工具链),用于构建模块化的 React Native 插件,这些插件可以相互交互。 我会把这些细节留到下一篇文章中,但是我们很兴奋,因为这有可能解决 React Native 中原生模块存在的一系列问题。 它还打开了与其他相邻社区(如Flutter)共享 cross-platform APIs 实现的可能性ーー我们通过制作一个用于 Flutter 的 Unimodule 适配器和发布一些 Flutter 包来使用 Expo SDK! (如果你好奇的话,可以阅读 How to use Expo Unimodules in Flutter)

让我们来看看这个问题的实质: 如何在应用程序中使用这些 API?

在 React Native 应用程序中安装 Unimodule

1. 获取 react-native-unimodules

如果你通过 react-native init 或者 ignite-cli 之类的工具创建 React Native 项目,那么您需要将 react-native-unimodules 包添加到项目中并首先对其进行配置: 按照 README 中的说明进行操作。 这个包提供了其他模块通常依赖的功能(如 Permissions, Constants, 和 FileSystem) : 它是一个构建其他模块的平台。 每个应用程序只需要这样做一次。

如果通过运行 expo init 并选择 Bare 模板,通过 expo-cli 创建一个 Bare React Native 项目,那么您的项目将默认安装并配置 react-rative-unimodule。 您可以使用 react-native run-ios 或 react-native run-android 而不是 expo start 来运行这个项目。

2. 查找并安装所需的 packages

在 Expo 文档中的 Expo documentation部分,找到要添加到项目中的 API。 跳转到 Installation 部分,并按照链接进入 Bare React Native 的安装说明。 大多数软件包都有相同的简单安装流程,但在少数情况下,除了配置依赖项之外,您还需要添加一些代码。 接下来,你就可以应用程序中使用它了。

需要注意的是,SDK 中包含的某些 api 不是 Unimodules: MapView 只是 react-native-maps,SVG 是 react-native-svg,Gestorehandler 是 react-native-gesturehandler,takeSnapshotAsync 是 react-native-view-shot 的包装。 所有这些 API 都可以按照相应 READMEs 中的说明进行安装。

在 Managed 应用程序中安装 Unimodule

当你在 expo init 的时候选择 Managed 时,你将得到一个可以在 Expo 客户端打开的项目,其中包括 expo package,它是构成 expo SDK 的包的集合。 例如,它依赖于并重新导出 expo-permissions, expo-file-system, expo-web-browser 等模块。

在不久的将来,expo package 将只包含最小的核心包,类似于 react-native-unimodules,要在应用程序中使用其他包,你需要安装 npm 包,但不需要本修改原生代码。 这将实现更小的 bundle 大小和更快的构建时间,因为只包含你在应用程序中使用的代码。

社区中的其他人可能开始围绕 Unimodule 工具构建他们的原生模块。 我们不能在 Expo 客户端中支持任意的原生模块,同时通过 App Store 发布,所以你现在不能在 Managed 应用中安装这些模块。

Expo 团队设计和创建的 Unimodules 都将作为基础设施,我们将继续为其添加 Web 和 TypeScript 的支持,更多特性,敬请期待。

ExpoKit 的未来

在博客 ExpoKit 2019中,我有提到我们计划继续支持和改进 ExpoKit 工作流。 这是对其进行评估的第一个结果。 通过在一个简单的 React Native 应用程序中安装 Unimodules,你已经可以非常接近使用 ExpoKit 的效果了。 不过还是缺少了 Expo 里基于 TaskManager、 AppLoading 和 SplashScreen 实现的 notifications services, background tasks 以及我们的实验性的 AR 相关的 API。 我们已经开始着手将后台任务移植到 React Native,并将在之后不久启动 OTA 更新 和 Notifications 的 Unimodules。

What’s next

我们也期待着将我们的 OTA 更新 和 Background Tasks APIs 交到 Bare 工作流用户手中。 最后,我们希望帮助其他人使用 Unimodules 基础设施来建立自己的库,如果这对他们有益的话,因此我们将记录如何从头开始构建自己的 Unimodule,以及如何转换现有的 React Native 库。

本文翻译自 Expo 的一篇博客:You can now use Expo APIs in any React Native app  

海计划公众号
(0)
上一篇 2020/03/30 16:06
下一篇 2020/03/30 16:06

您可能感兴趣的内容

  • 零基础如何学web前端基础知识从小白到大神进阶_前端小白知识

    下面给大家讲解一下前端需要掌握哪些技术和学习路线,Web前端基础知识:一.前端相关概念建立浏览器的概念介绍: 浏览器的作用、工作方式HTTP协议: 协议产生的原因、作用、及内容页面加载流程:当用户打开浏览器,输入地址栏并按下回车之后发生的事情二.HTML-CSS-JS基础-jQueryHTML及HTML5:理解浏览器如何解析HTML、基本的语法规则、不同标签

    2020/04/05
  • Enchant.js小白指南一个模块化的、面向对象的JavaScript框架

    Enchant.js基础入门 官方网址:http://enchantjs.com/ GitHub:https://github.com/wise9/enchant.js 简介描述:…

    2020/03/05
  • http返回状态码小白攻略_码使用帮助

    状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息–表示请求已接收,继续处理2xx:成功–表示请求已被成功接收、理解、接受3xx:重定向–要完成请求必须进行更进一步的操作4xx:客户端错误–请求有语法错误或请求无法实现5xx:服务器端错误–服务器未能实现合法的请求100 Continue 继续。客户端应

    2020/03/29
  • 浏览器刷新事件的监听和使用菜鸟指南_刷新菜鸟教程下载

    浏览器F5刷新的时候有一个刷新执行之前的事件,beforeunload 事件,这个事件可以提示用户在刷新页面之前有一个提示。下面是beforeunload的用法:首先在methods中定义beforeunload事件beforeunloadHandler(e) {// e.preventDefault()// e.returnValue = ”e.retu

    2020/03/30
  • 操作系统和Web服务器那点事儿入门基础教程_服务器基础指南

    操作系统老大又一个进程启动了,操作系统老大叹了一口气,毕竟自己的肩头又多了一份责任。让人烦恼的是,新来的家伙们很无知,几乎就是一张白纸。有些老实本分的会按照自己的规矩来做事,有些刺头儿喜欢问这问那,时不时还想搞点非法的访问,想访问别的进程的地址空间,甚至想访问内核的代码和数据! 这时候,我只有把他kill掉祭天,留下一个core dump的尸体让码农们去分析

    2020/04/05
  • muuuuu使用帮助_日本漂亮的酷站收集

    muuuuu使用帮助 官方网址:https://muuuuu.org/ 简介描述:日本漂亮的酷站收集 “Muuuuu”是日本的一家致力于收集高质量垂直网站设计作品的站点,属于非盈利…

    2020/03/10
  • 能让你开发效率翻倍的 VSCode 插件配置使用攻略_插件小白知识

    工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,现在仍高频使用的就是 [VSCode]和 [Vim]了。实际上我在 VSCode 里面安装了 Vim 插

    2020/03/24
  • web前端程序员真的这么值钱吗?小白教程_前端使用说明

    对于互联网公司来说用户就是上帝,做好客户体验一切才有可能。所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用。前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会成为Web前端高级软件工程师,年薪可以达到15万以上;工作3-5年后通常可以成为Web前端技术主管或者经理,年薪在15-50万之间;工作年限5年以上,通常会成为互

    2020/03/30
  • JS中的DOM基础入门_dom基础知识教程

    一、入口函数;  (1) $(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq  (2) $(window).load:在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq  (3) window.onload=function(){}:必须等到页面内包括

    2020/03/29
  • jquery实现显示textarea输入字符数使用教程_textarea小白知识

    起初会想到使用keyup、keydown、keypress或者是onchange事件,onchange需要失去焦点才触发, 其它三个有些对按住键盘某个键不放不生效,有些对使用中文输入法正在输入时统计不正确。网上找到一种方法就是绑定事件input propertychange

    <met

    2020/03/29
  • h5 与原生 app 交互的原理使用帮助_移动端小白指南

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。h5 与原生 app 的交互,本质上说,就是两种调用:app 调用 h5 的代码h5 调用 app 的代码1. app

    2020/04/03
  • 开发工具箱小白攻略_走南闯北,千锤百炼

    开发工具箱小白攻略 官方网址:http://www.box3.cn/ 简介描述:走南闯北,千锤百炼 开发工具箱,js开发工具箱,js加密解密工具,浏览器扩展程序,短链接,二维码,开…

    2020/03/06
  • Sketchbook使用指南_专业概念草图绘图神器

    Sketchbook使用指南 官方网址:https://sketchbook.com/ 简介描述:专业概念草图绘图神器 Sketchbook是一款由AUTODESK打造的永久免费绘…

    2020/03/11
  • Electrode入门百科_一个用于构建通用 React / Node.js 应用程序的平台

    Electrode入门百科 GitHub:https://github.com/electrode-io/electrode 简介描述:一个用于构建通用 React / Node….

    2020/03/11
  • ===、==相等运算符,对象转换为原始值的规则基础入门_规则使用攻略

    在日常的 JS 编码过程中,可能很难看到相等运算符(=)是如何工作的。特别是当操作数具有不同类型时。这有时会在条件语句中产生一些难以识别的 bug。很容易理解为什么 0 == 8 是 flase 的或者 ” == false 是 true。但是为什么{} == true是 false 的就看不出来了。接下将会讲这是肿么肥事。在这之前,先说几个术语:操作符(

    2020/03/24
  • Blaze UI使用攻略开放源码的模块化CSS工具包

    Blaze UI基础入门 官方网址:https://www.blazeui.com/ GitHub:https://github.com/BlazeUI/blaze 简介描述:开放…

    2020/03/05