将Expo Apps分离到ExpoKit：概念

在这篇文章中，您将学习ExpoKit是什么以及如何将其用于向Expo应用程序添加本机功能。 您还将了解它的一些优缺点。

但是，您也已经看到，Expo不支持应用程序可能需要的所有本机功能。 尽管Expo团队一直在努力支持更多的本机功能 ，但是最好学习如何将现有的Expo项目转换为标准的本机项目，以便在需要时可以轻松进行过渡。 因此，在这个由两部分组成的系列文章中，我们将研究如何做到这一点。

在本文中，您将了解什么是ExpoKit以及何时需要它，以及一旦分离到ExpoKit就会保留并丢失哪些Expo平台功能。

先决条件

本教程假定您已经为Expo和React Native开发设置了计算机。 这意味着您将需要Android Studio或Xcode或同时使用这两者，具体取决于要部署的位置。 请确保查看特定平台的“使用本机代码构建项目”标签下的React Native文档中的“ Expo入门指南”以及React Native文档中的“入门”指南。

了解Node.js是有帮助的，但不是必需的。

什么是ExpoKit？

ExpoKit是一个Objective-C和Java库，允许您在标准React Native项目中使用Expo平台。 当我说“标准React Native项目”时，是指使用react-native init命令创建的项目。

脱离ExpoKit的缺点是您将必须为React Native设置标准的本机开发环境！

另一个缺点是，您在分离应用程序时只能使用ExpoKit使用的React和React Native版本。 这意味着如果您要安装的本机模块依赖于React或React Native的早期版本，则可能需要解决兼容性问题。

如果您认为您的应用程序需要大量内置的React Native和Expo API不支持的本机模块，建议您避免使用Expo API。 这样，您就可以在需要开始使用自定义本机模块时轻松地“弹出”到标准React Native项目 。

什么时候分离到ExpoKit？

您可能由于以下任何原因而分离现有的Expo项目：

• Expo支持的本机功能公开的API不涵盖您的用例。
• 您需要使用Expo平台当前不支持的本机功能。 示例包括蓝牙和后台任务。
• 您要使用特定的服务。 目前，Expo使用Firebase实时数据，使用Sentry进行错误报告。 如果要使用替代服务，唯一的选择是编写自己的代码，以将要使用的服务与HTTP API进行通信，或者安装执行此任务的现有本机模块。
• 您有一个现有的持续集成设置，不适用于Expo，例如，如果您使用Fastlane或Bitrise进行持续集成。 Expo并没有真正与这些服务直接集成，因此，如果您想在仍处于Expo平台上使用它们，则必须编写自己的集成代码。

分离到ExpoKit时保留的功能

分离到ExpoKit意味着您将失去Expo平台提供的某些功能。 但是，仍保留以下基本功能：

• 博览会API 。 您仍然可以使用Expo API，例如Permissions API 。
• 实时重载 。 在开发应用程序时，分离的Expo应用程序仍可以使用实时重新加载。 唯一的区别是您将不再能够使用Expo客户端应用程序。 如果您是为Android开发的，则仍然可以使用Android设备或Genymotion之类的模拟器来测试该应用。 如果您正在为iOS开发，则可以在Xcode中安装的模拟器上运行该应用。 您也可以在iPhone或iPad上运行它，但是您需要执行一些其他步骤 ，本教程中不会介绍。

分离到ExpoKit时失去的功能

通过分离到ExpoKit，您将失去以下功能：

• 借助QR代码和 Expo Snack 轻松共享应用程序 。 分离到ExpoKit后，您会注意到仍然可以通过Expo XDE共享您的应用程序。 它仍然会生成一个QR码，但是当您使用Expo Client应用程序对其进行扫描时，该代码将不再起作用。
• 通过Expo的服务器 构建独立的应用程序 。 您不再可以使用exp build命令来构建.ipa或.ipa 。 世博服务器上的apk文件。 这意味着您必须安装Android Studio或Xcode（取决于要部署的平台）并自己在本地构建应用程序。 或者，如果尚未设置本地开发环境，则可以使用Microsoft App Center来构建应用程序。 请注意，您不能像在标准React Native项目中那样使用诸如react-native run-android或react-native run-ios来运行该应用程序。
• 世博会的推送通知服务 。 分离后，Expo不再管理您的推送证书，因此需要手动管理推送通知管道。

我们将创造什么

为了展示分离到ExpoKit的好处，我们将创建一个需要Expo平台当前不支持的本机功能的应用。 该应用程序将是一个位置共享应用程序。 它通常将在后台运行，以获取用户的当前位置。 然后它将通过Pusher发送该位置。 我们还将创建一个在地图上显示用户当前位置的网页。

该应用程序的外观如下：

您可以在GitHub repo教程中找到项目的完整源代码 。

设置应用

在本文的其余部分，我们将重点介绍如何设置应用程序。 然后，在下一篇文章中，我们将充实一些与ExpoKit交互的关键代码。

创建推送器应用

如果要在应用程序中使用Pusher的服务，则需要在Pusher仪表板中创建一个应用程序。 登录后，转到仪表板，单击您的应用程序 ，然后单击创建新应用程序 ，然后输入应用程序的名称：

创建应用后，转到“ 应用设置”，然后选中“ 启用客户端事件”复选框。 这将使我们能够直接从应用程序而非服务器触发Pusher事件。 然后单击更新以保存更改：

您可以在“ 应用程序键”选项卡下找到键 。 连接到Pusher应用后，以后将需要这些。

创建一个Google App

同样，我们需要创建一个Google项目才能使用Google Maps API和Geolocation API。 转到console.developers.google.com并创建一个新项目：

接下来，转到项目仪表板，然后单击“ 启用API和服务” 。 搜索Google Maps JavaScript API和Google Maps Geocoding API并启用它们。

在项目仪表板中，转到“ 凭据” ，然后单击“ 创建凭据”>“ API密钥” 。 请注意它生成的API密钥，我们稍后将使用它。

创建一个新的世博项目

在您的工作目录中运行以下命令：

exp init ocdmom
cd ocdmom
exp start

现在，Expo应用程序已准备好进行测试。 只需使用Expo客户端应用程序（适用于iOS或Android）扫描QR码。

编写应用程式

现在我们准备开始对该应用程序进行编码。 我们将开始以标准的Expo项目进行开发，然后在需要使用自定义本机功能时将其分离到ExpoKit。

生成唯一的跟踪代码

清除项目目录根目录中App.js文件的内容，并添加以下导入：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

我们还将使用自定义标头组件：

import Header from './components/Header';

在构造函数中，将unique_code设置为其初始状态：

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      unique_code: Math.random().toString(36).substring(7).toUpperCase() // generate a random string
    };
  }

}

我们应用的用户界面将显示此唯一代码。

render() {
  return (
    <View style={styles.container}>
      <Header text="OCDMom" />
      <View style={styles.body}>
        <Text style={styles.input_label}>Unique Code</Text>
        <Text style={styles.unique_code}>{this.state.unique_code}</Text>
      </View>
    </View>
  );
}

最后，这是Header （ components / Header.js ）组件的代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Header extends React.Component {
  
  render() {
    return (
      <View style={styles.header}>
        <Text style={styles.header_text}>{this.props.text}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: 'column',
    alignSelf: 'stretch',
    paddingTop: 20,
    paddingBottom: 5,
    backgroundColor: '#f3f3f3'
  },
  header_text: {
    fontWeight: 'bold',
    fontSize: 17,
    textAlign: 'center'
  }
});

结论

这是关于将Expo应用程序分离到ExpoKit的两部分系列的第一部分。 在本文中，您学习了ExpoKit的概念，并开始设置一个将使用ExpoKit功能的项目。

在下一篇文章中，我们将把应用程序分离到ExpoKit，然后继续对其进行编码，以便可以在设备上运行它。

翻译自: https://code.tutsplus.com/tutorials/detaching-expo-apps-to-expokit-concepts--cms-30661