将Expo应用程序分离到ExpoKit：概念

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

在这篇文章中，您将了解 ExpoKit 是什么以及何时需要它，以及分离到 ExpoKit 后哪些 Expo 平台功能会保留和丢失。 

先决条件

本教程假设您已经为 Expo 和 react Native 开发设置了您的计算机。这意味着您将需要 android Studio 或 Xcode 或两者，具体取决于您要部署的位置。如果您还没有这样做，请务必查看 您的特定平台的“使用本机代码构建项目”选项卡下 的React Native 文档中的“开始使用 Expo”指南，以及“开始使用”指南。

节点.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。

• 实时重新加载。在您开发应用程序时，Detached Expo 应用程序仍然能够使用实时重新加载。唯一的区别是您将无法再使用 Expo 客户端应用程序。如果您正在为 Android 开发，您仍然可以使用您的 Android 设备或Genymotion等模拟器 来测试应用程序。如果您正在为ios开发，该应用程序可以在您安装在 Xcode 中的模拟器上运行。您也可以在您的iphone或ipad上运行它，但您需要执行一些 其他步骤 ，我不会在本教程中介绍这些步骤。

与 ExpoKit 分离时丢失的功能

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

• 通过二维码和 Expo Snack轻松分享应用。分离到 ExpoKit 后，您会注意到您仍然可以通过 Expo XDE 共享您的应用程序。它仍会生成一个 QR 码，但当您使用 Expo 客户端应用程序扫描它时，该代码将不再有效。

• 通过 Expo 的服务器构建独立的应用程序。您不能再使用该 exp build命令来构建.ipa或 . 世博会服务器上的apk文件。这意味着您必须安装 Android Studio 或 Xcode（取决于您要部署的平台）并自己在本地构建应用程序。或者，  如果您尚未设置本地开发环境，则可以使用Microsoft App Center构建应用程序。请注意，您不能像在标准 React Native 项目中那样使用类似 react-native run-android或 react-native run-ios运行应用程序的命令。 

• 世博会的推送通知服务。Expo 在分离后不再管理您的推送证书，因此需要手动管理推送通知管道。

我们将创造什么

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

这是应用程序的外观：

您可以在教程 GitHub 存储库中找到该项目的完整源代码。

设置应用程序

在这篇文章的其余部分，我们将专注于设置我们的应用程序。然后，在下一篇文章中，我们将充实一些与 ExpoKit 交互的关键代码。

创建推送应用

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

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

您可以在“ 应用程序密钥” 选项卡下找到密钥。一旦我们连接到 Pusher 应用程序，我们稍后将需要这些。

创建 Google 应用

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

接下来，转到项目仪表板并单击Enable APIs and services。搜索Google Maps javascript API 和 Google Maps Geocoding API 并启用它们。

在项目仪表板中，转到Credentials 并单击Create Credentials > API Key。记下它生成的 API 密钥，因为我们稍后将使用它。

创建一个新的世博项目

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

exp init ocdmom
cd ocdmom
exp start

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

编写应用程序

现在我们已经准备好开始编写应用程序了。我们将作为标准 Expo 项目开始开发，然后在需要使用自定义原生功能时分离到 ExpoKit。

生成唯一的跟踪代码

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

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

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

import Header from './components/Header';

在const ructor 中，将 设置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
    };
  }

}

我们应用程序的 UI 将显示此唯一代码。

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 功能的项目。