[英]How to use a Cordova plugin in react JS page
I would like to use some Cordova plugins in my react JS app and the app has been failing.我想在我的 react JS 应用程序中使用一些 Cordova 插件,但该应用程序一直失败。 I understand cordova is only available at runtime by i need a workaround.
我知道cordova 仅在运行时可用,因为我需要一种解决方法。
My app was created with create react app with cordova here我的应用程序是通过 create react app with cordova here创建的
For example, I want to import the cordova-plugin-device to get the device uuid with the following code:比如我想导入cordova-plugin-device来获取设备uuid,代码如下:
import React, {Component} from 'react';
...
var device = require("cordova-plugin-device");
class Login extends Component {
handleSubmit = () => {
const { phone, password } = this.state
let params = {
phonenumber: phone,
password: password,
deviceID: device ? device.uuid : "test"
}
...
}
render () {
...
}
}
}
I am getting an error with npm start
and when i run npm build
.我在
npm start
和运行npm build
时遇到错误。 This is the error Module not found: Can't resolve 'cordova-plugin-device' in 'C:\\projects\\
这是错误
Module not found: Can't resolve 'cordova-plugin-device' in 'C:\\projects\\
Any pointers on how to implement this would be appreciated.任何有关如何实现这一点的指针将不胜感激。
I figured how to solve my problem.我想出了如何解决我的问题。 COrdova is made available at runtime so i used window.cordovaPulgin to access it.
COrdova 在运行时可用,所以我使用 window.cordovaPulgin 来访问它。
For example, i needed a Payment plugin service that call its methods, like this:例如,我需要一个调用其方法的支付插件服务,如下所示:
PaymentPlugin.pay(payRequest, paySuccess, payFail);
My problem was that my code npm start && npm run build
was failing because it could not find PaymentPlugin
, so to make this work, after extensive research, realized that if plugin was properly installed, I would be able to use it like我的问题是我的代码
npm start && npm run build
失败,因为它找不到PaymentPlugin
,所以为了使这项工作,经过广泛研究,意识到如果插件安装正确,我将能够像这样使用它
window.PaymentPlugin.pay(payRequest, paySuccess, payFail);
I was trying to follow the same suggested solution by @Lateefah to get access of local notifications plugin but window.cordova was showing undefined.我试图按照@Lateefah 的相同建议解决方案来访问本地通知插件,但 window.cordova 显示未定义。 After doing some more research, I realised that the solution is correct but my react application must reside in the the cordova project as suggest here https://stackoverflow.com/a/43440380/4080906 .
在做了更多的研究之后,我意识到解决方案是正确的,但我的反应应用程序必须驻留在科尔多瓦项目中,如此处的建议https://stackoverflow.com/a/43440380/4080906 。
The steps I followed:我遵循的步骤:
create cordova app (eg cordovaApp)创建cordova应用程序(例如cordovaApp)
cd cordovaApp && create-react-app reactApp cd cordovaApp && create-react-app reactApp
modify index.js in reactApp and add修改 reactApp 中的 index.js 并添加
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
const startApp = () => {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
};
if (!window.cordova) {
startApp();
} else {
document.addEventListener("deviceready", startApp, false);
}
serviceWorker.unregister();
<script type="text/javascript" src="cordova.js"></script>
"build": "react-scripts build && cp -a ./build/. ../www/",
import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<button
onClick={() => {
if (window.cordova) {
if (window.cordova.plugins) {
alert("Crodova and plugins Found");
window.cordova.plugins.notification.local.schedule({
title: "My first notification",
text: "Thats pretty easy...",
foreground: true,
});
} else alert("plugins not found");
} else alert("Cordova not found");
}}
>
Get Notified
</button>
</header>
</div>
);
}
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.