[电容教程] 将 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 版权协议，转载请附上原文出处链接和本声明
