使用 reactjs（非本机）从我的网站创建一个移动应用程序

Posted 2023-02-22

【中文标题】使用 reactjs（非本机）从我的网站创建一个移动应用程序

【英文标题】：create a mobile app from my web site using reactjs (not native)

【发布时间】：2020-01-12 01:53:23

【问题描述】：

我需要开发一个与我的网站相同的移动应用程序（已经使用 reactjs 创建）。我正在研究reactjs。我可以将我的 reactjs 代码从网站转换为移动应用程序的 reactjs 吗？

需要一个解决方案 谢谢

【问题讨论】：

无法使用 ReactJS 创建移动应用程序。要么你必须使用 react native，要么你可以创建一个 Progressive Web App，或者你可以在应用程序中使用 WebView。

【参考方案1】：

你不能直接从 react-js 执行代码转换到 react native，即使它们之间有很多相似之处。使用 React.js 构建的 Web 应用程序可以轻松转换为 React Native 移动应用程序，并且部分源代码可以重用

如果您想为移动和网络开发一个应用程序，

创建一个对移动浏览器友好的网络应用

或

使用 React 创建 PWA(Progressive Web app)，PWA 可以像 GPS 一样访问 Native Mobile api

【参考方案2】：

您可以创建一个“应用”，它实际上只是一个显示您的网站的 web 视图，但它不会真正拥有与原生应用相同的体验。

如前所述，PWA 将是一个很好的方法。通过这种方式，您可以保留所有 ReactJS 代码并获得类似应用程序的体验。 android 甚至支持submitting PWAs to the store。

【参考方案3】：

所以您需要创建渐进式网络应用程序，只需在您的元标记WebApp Manifest 中添加一个mainfest.json 文件

带有一些闪屏和图标的 chrome 会让您像在客户端设备上一样安装移动应用程序。并尝试实现一个service worker来处理离线模式Service Worker

egghead的这门课很好PWA

【讨论】：

非常感谢 abdoutelb，我听说 PWA 应该在生产模式下使用，是真的吗？

@mitsu 它已经被使用了很长时间，很多公司都发布了他们的 pwa ...你可以查看 instagram 或 twitter pwa。

我尝试了很多例子，但他们都说我必须处于生产模式:(

@mitsu 您可以从 serviceWorker.js 中删除 process.env.NODE_ENV== "production" 并通过开发来开发服务工作者。你可以使用工作箱

【参考方案4】：

不，兄弟，无法将 PWA 上传到苹果商店，顺便说一下，你可以使用离子电容器绕过这个问题！

Capacitor 是一个跨平台的应用运行时，可以轻松构建 在 ios、Android、Electron 和 Web 上本机运行的 Web 应用程序。我们 将这些应用称为“Native Progressive Web Apps”，它们代表了 超越混合应用的下一步发展。

根据Manish Mandal 编写的本教程，您必须：

1 - 首先，转到现有 React 应用程序的根目录并创建一个文件电容器.config.json 并在其中放入以下代码

  "appId": "io.ionic.yourapp",
  "appName": "yourapp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "cordova": 

2 - 现在创建另一个文件名 ionic.config.json 并在其中插入以下代码。

  "name": "yourapp",
  "integrations": 
    "capacitor": 
  ,
  "type": "react"

3 - 现在我们需要构建我们的 React 项目。要构建您的 React 应用程序，请将您的终端打开到项目的根目录并运行以下命令

npm run build

注意：这将在您的根项目中创建构建文件夹，并且 文件夹名称应与里面的 webDir 名称匹配 电容.config.json文件

4 - 现在我们将在我们的机器中全局安装 ionic。要在您的机器上全局安装 ionic，请打开您的终端并运行以下命令。

npm install -g @ionic/cli

5 - 现在在我们的项目中安装电容器芯。

npm install @capacitor/core --save

安卓

6 - 之后，我们将首先使用我们现有的 react 应用创建一个 android 应用。打开终端并输入

ionic capacitor add android

这将在您的根项目中创建 android 文件夹并安装所有必需的依赖项。

7 - 现在运行以下命令在 android studio 中打开你的 android 项目。

npx cap open android

等待一段时间，然后它会要求您更新 Gradle。只需将 Gradle 更新到最新版本并在模拟器中运行项目即可。您也可以连接手机，在手机上实时运行项目。

8 - 现在从 android studio 打开构建菜单并构建您的 apk 文件。

IOS

9 - 要创建 ios 应用程序，请运行以下命令

ionic capacitor add ios

这会将所有必需的依赖项和 ios 文件夹安装到您的项目中。

10 - 现在运行以下命令在 Xcode 中打开您的 ios 项目。

npx cap open ios

11 - 现在在模拟器或物理设备中打开应用并构建应用。

---

关于电容器的更多信息： https://capacitorjs.com/