在这篇文章中,您将学习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发送该位置。 我们还将创建一个在地图上显示用户当前位置的网页。
该应用程序的外观如下:
![位置跟踪应用](https://i-blog.csdnimg.cn/blog_migrate/ffbda221d8eafd5e472ea84cdaad7568.png)
您可以在GitHub repo教程中找到项目的完整源代码 。
设置应用
在本文的其余部分,我们将重点介绍如何设置应用程序。 然后,在下一篇文章中,我们将充实一些与ExpoKit交互的关键代码。
创建推送器应用
如果要在应用程序中使用Pusher的服务,则需要在Pusher仪表板中创建一个应用程序。 登录后,转到仪表板,单击您的应用程序 ,然后单击创建新应用程序 ,然后输入应用程序的名称:
![创建推送器应用](https://i-blog.csdnimg.cn/blog_migrate/31839d4df00f30015070f857f13fc5dc.png)
创建应用后,转到“ 应用设置”,然后选中“ 启用客户端事件”复选框。 这将使我们能够直接从应用程序而非服务器触发Pusher事件。 然后单击更新以保存更改:
![启用客户事件](https://i-blog.csdnimg.cn/blog_migrate/7968e22f4c094fe0d45483d48c1c644b.png)
您可以在“ 应用程序键”选项卡下找到键 。 连接到Pusher应用后,以后将需要这些。
创建一个Google App
同样,我们需要创建一个Google项目才能使用Google Maps API和Geolocation API。 转到console.developers.google.com并创建一个新项目:
![建立Google专案](https://i-blog.csdnimg.cn/blog_migrate/75f1a2a79c49339f3cf79a72bbdfd149.png)
接下来,转到项目仪表板,然后单击“ 启用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