在 Android 设备上运行 React Apollo 网站 - 使用 react-native 的步骤尚不清楚

Posted 2023-03-10

【中文标题】在 Android 设备上运行 React Apollo 网站 - 使用 react-native 的步骤尚不清楚

【英文标题】：Running React Apollo website on Android device - the step with react-native is unclear

【发布时间】：2020-08-05 11:31:57

【问题描述】：

我正在使用React Apollo boilerplate。现在我想将该网站部署到我的 android 设备上。所以我完全按照Running On Device tutorial 所说的那样做了：

启用 USB 调试 一切都好 通过 USB 插入您的设备 adb devices 我的列表如下所示：

       List of devices attached
       5141a720        device

所以这看起来不错。

运行您的应用 但是我有一个问题，因为我不知道react-native 是什么意思 npx react-native run-android 结果为@​​987654327@

难道我的项目不是 react-native 项目，这就是为什么 react-native 不是适合我的情况的解决方案？

如何在我的 Android 设备上运行该网站而不将其转换为 APK 文件？

【参考方案1】：

刚刚添加了这两行和npm/yarn install:

"react-native": "^0.62.2",
"react-native-cli": "^2.0.1",

然后再次尝试npx react-native run-android，现在它似乎工作了。但是收到一条消息说：

找不到错误的 Android 项目。你确定这是一个 React Native 项目？如果您的 Android 文件位于非标准位置 （例如不在“android”文件夹内），考虑设置 project.android.sourceDir 选项指向一个新的位置。运行命令行 使用 --verbose 标志了解更多详细信息。

很明显，android 文件夹丢失了。在这里它有助于运行npx react-native init "test"。这创建了一个名为 test 的子文件夹。在这里，我只是将那个 android 文件夹移到了我的项目中。

现在npx react-native run-android 可以工作了。

【参考方案2】：

我不是 React Native 专家，但根据我对该工具的了解，您需要创建用于在本机设备 (fc) 上呈现的特殊组件。

电容器可能更适合您的需求： 安装：https://capacitor.ionicframework.com/docs/getting-started 工作流程：https://capacitor.ionicframework.com/docs/basics/workflow

工作流程的快速总结：

构建反应应用npm run build 创建一个电容器.config.json：

    "appId": "com.example.app",
    "appName": "Example",
    "bundledWebRuntime": false,
    "npmClient": "npm",
    "webDir": "build",
    "cordova": ,
    "linuxAndroidStudioPath": "/mnt/s/android-studio/bin/studio.sh"

打开安卓模拟器：npx cap open android

希望这会有所帮助。

【讨论】：

看起来不错，但我使用的是纱线。我也可以对纱线做同样的事情吗？并且无法通过 localhost:3000 到我的设备？我的意思是一个解决方案可能是创建一个 ngrok 会话，它将我的本地成本代理到网络。但是现在最好只是通过网站。我会试试你的，希望我能运行它。

如果你有yarn，你也应该有npm。所以我相信 yarn run build 和 npx 会起作用

再次感谢您的想法。我只是再次尝试，现在它以某种方式工作。我不知道是否真的错过了部门，但至少现在正在工作。但无论如何，使用电容器是个好主意。如果 React-native 不能满足我的需要，也许会回到它。