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

Question

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

我想利用Screen Orientation Plugin with Capacitor and Ionic React. This is because Cordova is not officially supported for Ionic React projects. 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 中使用带有 Capacitor 的 Cordova 插件的正确方法吗？ Reference

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

Answer 1

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

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

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

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

What is the right way to use Ionic Native / Cordova Plugins with Ionic (React) & Capacitor?

reactjs

ionic-framework

capacitor