Question

我想在我的反应JS应用程序中使用一些Cordova插件，应用程序一直在失败。我知道cordova仅在运行时可用，我需要一个解决方法。

我的应用是使用带有cordova here

的create react app创建的

例如，我想导入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 () {
       ...
   }

 }
}

我在npm start时遇到错误，当我运行npm build时。这是错误Module not found: Can't resolve 'cordova-plugin-device' in 'C:\projects\

任何关于如何实现这一点的指示都将不胜感激。

Answer 1

我想到了如何解决我的问题。 COrdova在运行时可用，因此我使用window.cordovaPulgin来访问它。

例如，我需要一个调用其方法的Payment插件服务，如下所示：

PaymentPlugin.pay(payRequest, paySuccess, payFail);

我的问题是我的代码npm start && npm run build失败了，因为它找不到PaymentPlugin，所以为了使这项工作，经过广泛的研究，我意识到如果插件已正确安装，我将能够像

一样使用它

window.PaymentPlugin.pay(payRequest, paySuccess, payFail);

Answer 2

我试图按照@Lateefah提出的相同建议解决方案来访问本地通知插件，但window.cordova显示为未定义。经过更多研究后，我意识到该解决方案是正确的，但我的React应用程序必须驻留在cordova项目中，如此处https://stackoverflow.com/a/43440380/4080906所示。

我遵循的步骤：

创建cordova应用（例如cordovaApp）
cd cordovaApp和＆create-react-app reactApp
在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();

在公用文件夹下的reactApp中的index.html的正文标记中添加cordova.js参考

    <script type="text/javascript" src="cordova.js"></script>

（可选）在reactApp的package.json中修改构建命令以构建并将构建复制到cordova www文件夹（对于Linux / Mac）

    "build": "react-scripts build && cp -a ./build/. ../www/",

（可选）要对此进行测试，我在app.js中添加了一个按钮，并在其中添加了通知，它在Android设备上对我有用。

    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;

如何在反应JS页面中使用Cordova插件

2 个答案: