使用ReactJS（非原生）从我的网站创建移动应用程序

Question

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

请提供解决方案，谢谢。

- mitsu

---

使用ReactJS无法创建移动应用程序。您必须使用React Native，或者可以创建渐进式Web应用程序，或者可以在应用程序中使用WebView。 - bonyem

Answer 1

不，PWA无法上传到苹果商店，但是你可以通过使用Ionic Capacitor绕过这个问题！

Capacitor是一个跨平台的应用程序运行时，可以轻松构建原生运行于iOS、Android、Electron和Web的Web应用程序。我们称这些应用程序为“本地渐进式Web应用程序”，它们代表了混合应用程序的下一步发展。

根据Manish Mandal编写的教程，您需要执行以下操作：

1-首先，转到现有React应用程序的根目录并创建一个capacitor.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

注意：这将在您的根项目中创建构建文件夹，文件夹的名称应与capacitor.config.json文件中的webDir名称匹配。

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

npm install -g @ionic/cli

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

npm install @capacitor/core --save

ANDROID

6 - 接下来，我们将使用现有的React应用程序首先创建一个Android应用程序。打开终端并输入以下命令：

ionic capacitor add android

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

7- 现在运行以下命令，在Android Studio中打开您的Android项目。

npx cap open android

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

8-现在从Android Studio中打开Build菜单并构建您的apk文件。

IOS

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

ionic capacitor add ios

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

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

npx cap open ios

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

---

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

- Filippo Secchi

Answer 2

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

通过一些启动画面和图标，Chrome会让您在客户端设备上安装移动应用程序。并尝试实现服务工作者来处理离线模式Service Worker

这个来自Egghead的课程非常好PWA

- abdoutelb

---

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

@mitsu，它已经被广泛使用了很长时间，许多公司都发布了他们的PWA... 你可以查看Instagram或Twitter的PWA。 - abdoutelb

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

@mitsu，你可以从serviceWorker.js中删除process.env.NODE_ENV== "production"，并通过开发模式来开发服务工作者。同时，你也可以使用workbox。 - abdoutelb

Answer 3

你可以创建一个“应用程序”，实际上只是一个 Webview，显示你的网站，但它不会像原生应用程序一样具有相同的体验。

如上所述，PWA 是一个好的方法。这样，你可以保留所有 ReactJS 代码，并获得类似应用程序的体验。 Android 甚至支持将 PWA 提交到商店。

- Jonathan Irwin

Answer 4

你不能直接将React.js代码转换成React Native代码，即使它们之间有很多相似之处。使用React.js构建的Web应用程序可以轻松转换为React Native移动应用程序，并且可以重复使用一些源代码。

如果你想要同时开发适用于移动和Web的单个应用程序，

创建一个对移动浏览器友好的Web应用程序

或者

使用React创建PWA（渐进式Web应用程序），PWA可以访问本地移动API，例如GPS。

- Ajay Ghosh