[电容教程] 将 react app 转为 Android/ios app

[电容教程] 将 react app 转为 Android/ios app

什么是电容器？

电容器是一个跨平台的应用程序运行时，可以轻松构建在 iOS、Android 和 Web 上原生运行的 Web 应用程序。我们将这些应用程序称为“原生渐进式 Web 应用程序”，它们代表了超越混合应用程序的下一次发展。

在五个命令行内，我们可以将任何 react 应用程序转换为 Native 渐进式应用程序

注意：如果您的应用程序使用任何硬件设备（例如存储、GPS、相机等），本教程将不起作用。硬件设备的实现需要额外的插件。

先决条件-：

1.节点

2.npm

3.Android-Studio/Xcode

4. 代码编辑器

所以让我们开始创建一个示例反应项目

npx create-react-app 演示 — 使用-npm
要实现电容器，我们需要安装其核心依赖项和 cli

npm install — 保存 @capacitor/core @capacitor/cli
现在运行下面的命令，这将询问您应用程序名称和包名称（包名称应为 com.nameofPackge.com），然后它将创建一个电容器.config 文件
npx 上限初始化

打开你的电容器.config 文件更改 www 以构建

“webDir” : “www” — — — > “webDir” : “构建”

然后运行构建命令

npm 运行构建

添加您要为您的应用程序添加的平台，运行下面的命令 create packages for Android、ios 和 electron

npx 上限添加 android
npx 上限添加 ios
npx cap 添加电子

然后运行，下面的命令会触发 Android Studio/Xcode，它会自动构建你的项目

npx cap open android //或
npx cap open ios //或
npx 帽开电子

如何实现实时重载/热重载？

运行 npm start，复制运行您的应用程序的 URL 到电容器.config.json

“服务器”： {
“网址”：“ http://192.168.42.88:8100 "
//放置您的应用程序正在运行的应用程序 URL
}

现在打开 android->app->src->main->AndroidManifest.xml 并添加这一行
android:usesCleartextTraffic=”true”

现在应用程序标签看起来像这样

<application
android:usesCleartextTraffic=”true” //添加的行
安卓：allowBackup =“真”
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”
android:roundIcon=”@mipmap/ic_launcher_round”
安卓：supportsRtl =“真”
android:theme=”@style/AppTheme”>运行

然后执行最后的Command

npm 运行构建

为了测试这个在两个不同的终端中执行 npm start 和 npx cap open android，现在应用程序已经准备好开发了

注意：当您的申请完成后，删除服务器地址

谢谢你！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38950/32232411