如何使用 Capacitor 而不是 Cordova 将 Ionic Native/Cordova 插件与 Ionic React(而非 Angular)结合使用?

我想利用Screen Orientation Plugin与电容器和 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 的 native API 与 Ionic React 完美配合。例如,

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

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

这是在 Ionic React 中使用 Cordova 插件和 Capacitor 的正确方法吗? Reference

如果是的话,我在这里做错了什么?如果不是,我怎样才能实现同样的目标?

请您参考如下方法:

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

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

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


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!