使用Ionic Native/Cordova插件和Ionic(React)&的正确方法是什么?电容吗 [英] What is the right way to use Ionic Native / Cordova Plugins with Ionic (React) & Capacitor?

问题描述

如何使用电容器而不是Cordova将Ionic Native/Cordova插件与Ionic React(不是Angular)一起使用?

How can I use Ionic Native / Cordova Plugins with Ionic React (not Angular) using Capacitor instead of Cordova?

我想将屏幕方向插件与电容器和Ionic React结合使用.这是因为Ionic React项目并未正式支持Cordova.了解更多.

I want to make use of 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安装了以下相关依赖项.

My package.json has the following relevant dependencies installed.

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

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

The application builds successfully, but still opens in Portrait mode on my Android device. If I try to display the following,

console.log(ScreenOrientation.type)

该应用程序构建成功，但屏幕变为空白.

The app builds successfully, but the screen goes blank.

电容器的本机API与Ionic React完美配合.例如，

Capacitor's Native APIs work flawlessly with Ionic React. For example,

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

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

Will hide the status bar on my Android device.

在Ionic React中将Cordova插件与电容器一起使用是正确的方法吗?参考

Is this the right approach for using Cordova Plugins with Capacitor in Ionic React? Reference

如果是，我在这里做错了什么?如果没有，我该如何达到相同的目标?

If yes, what am I doing wrong here? And if no, how can I achieve the same?

推荐答案

问题已解决！我做得很好，只是忘记安装Ionic Native插件后运行 npx cap sync .

Problem solved! I was doing everything right, I had just forgotten to run npx cap sync after installing my Ionic Native Plugin.

因此，正确地将Cordova插件与电容器&离子(反应)是

So, the right way to use Cordova Plugins with Capacitor & Ionic (React) is

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

这篇关于使用Ionic Native/Cordova插件和Ionic(React)&的正确方法是什么?电容吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！