将 Ionic Native / Cordova 插件与 Ionic (React) & Capacitor 一起使用的正确方法是啥？

Posted 2023-02-19

【中文标题】将 Ionic Native / Cordova 插件与 Ionic (React) & Capacitor 一起使用的正确方法是啥？

【英文标题】：What is the right way to use Ionic Native / Cordova Plugins with Ionic (React) & Capacitor?将 Ionic Native / Cordova 插件与 Ionic (React) & Capacitor 一起使用的正确方法是什么？

【发布时间】：2020-01-07 07:39:39

【问题描述】：

如何使用 Capacitor 而不是 Cordova 将 Ionic Native / Cordova 插件与 Ionic React（非 Angular）一起使用？

我想将 Screen Orientation Plugin 与 Capacitor 和 Ionic React 一起使用。这是因为 Ionic React 项目并未正式支持 Cordova。 Know More.

这是我尝试过的。

import  ScreenOrientation  from '@ionic-native/screen-orientation'
.
.
.
.
useEffect(() => 
    ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE)
, [])

我的 package.json 安装了以下 相关 依赖项。

"@ionic-native/core": "^5.13.0",
"@ionic-native/screen-orientation": "^5.13.0",
"cordova-plugin-screen-orientation": "^3.0.2"

应用程序构建成功，但在我的 android 设备上仍以纵向模式打开。如果我尝试显示以下内容，

console.log(ScreenOrientation.type)

应用构建成功，但屏幕变为空白。

Capacitor 的原生 API 可与 Ionic React 完美配合。例如，

import  Plugins  from '@capacitor/core'
const  StatusBar  = Plugins
.
.
useEffect(() => 
    StatusBar.hide()
, [])

将隐藏我的 Android 设备上的状态栏。

这是在 Ionic React 中使用带电容器的 Cordova 插件的正确方法吗？ Reference

如果是，我在这里做错了什么？如果没有，我怎样才能达到同样的效果？

【参考方案1】：

问题解决了！我做的一切都是正确的，我只是在安装 Ionic Native 插件后忘记运行 npx cap sync。

因此，将 Cordova 插件与 Capacitor & Ionic (React) 一起使用的正确方法是

npm install @ionic-native/javascript-package-name
npm install cordova-plugin-name
npx cap sync