【问题标题】:Convert ReactJS-Project to Android-App with ionic capacitor throws Error on WSL使用离子电容器将 ReactJS-Project 转换为 Android-App 在 WSL 上引发错误
【发布时间】:2021-02-25 23:35:58
【问题描述】:

我目前正在开发一个相对简单的 Web 应用程序,我决定使用 ReactJS 作为框架。
我使用create-react-app 创建了一个简单的演示项目以开始使用。
我正在使用带有 Linux 子系统的 Windows 10 系统。

现在我的任务是让网站成为 Android 和后来的 iOs 应用程序可访问。

该网页应该仍然可以通过浏览器访问,所以我想我坚持使用 React 并构建响应式网页,以便在每个设备上提供相同的功能。

我研究了将 React 项目转换为“本机”/混合应用程序的方法,并偶然发现了 Cordova 和 Ionic。

我尝试按照本文中的步骤进行操作Convert your existing react js app to android or ios app using the ionic capacitor
我通过使用 XServer for GUI-Applications 在 WSL 上安装了 Android Studio。

现在,当我尝试通过使用将 Android 添加到我的项目中时 ionic capacitor add android --verbose我收到以下错误:

 ionic:lib Terminal info: { ci: false, shell: '/bin/bash', 

tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'capacitor', 'add', 'android' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: null, '--': [] } +5ms
  ionic:lib:project Project type from config: @ionic/react (react) +0ms
  ionic:lib:project Project details: { context: 'app', type: 'react', errors: [], configPath: '/mnt/d/ews/ReactWS/pacFrontend/ionic.config.json' } +1ms
  ionic Context: { binPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli', execPath: '/mnt/d/ews/ReactWS/pacFrontend', version: '6.12.1' } +0ms
> capacitor add android
  ionic:lib:telemetry Sending telemetry for command: 'ionic capacitor add' [ 'android', '--verbose', '--interactive', '--color' ] +0ms
Error

at new SubprocessError
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
at ChildProcess.<anonymous>
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
  ionic Error
  ionic     at new SubprocessError (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
  ionic     at ChildProcess.<anonymous> (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
  ionic     at ChildProcess.emit (events.js:315:20)
  ionic     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
  ionic     at onErrorNT (internal/child_process.js:465:16)
  ionic     at processTicksAndRejections (internal/process/task_queues.js:80:21) +126ms

现在我无法通过 Google 找到解决方案 - 这是离子/电容器或 WSL 的问题/错误。

感谢每一个帮助

【问题讨论】:

    标签: android reactjs ionic-framework windows-subsystem-for-linux


    【解决方案1】:

    所以我设法解决了我的问题,或者至少让我的 React Webapp 作为 Android 应用运行。

    我卸载了离子、电容器和其他所有东西,并删除了我的 node_modules 以创建一个新的npm install
    我继续

    npm install @capacitor/core @capacitor/cli
    

    和启动电容器

    npx cap init 
    npx cap add android
    

    现在我使用构建网页

    npm run build  
    

    创建我使用的 Android 应用程序

    npx cap copy
    npx cap copy android
    

    然后我可以在 Android Studio 中打开生成的android 文件夹并使用模拟器测试应用程序

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-10-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-10-20
      • 2015-10-23
      • 2021-10-31
      • 2022-01-22
      相关资源
      最近更新 更多