如何在 React JS 页面中使用 Cordova 插件答案

【问题标题】：How to use a Cordova plugin in react JS page如何在 React JS 页面中使用 Cordova 插件
【发布时间】：2018-11-07 10:28:03
【问题描述】：

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

我的应用是通过 create react app with cordova here 创建的

比如我想导入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\

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

【问题讨论】：

标签： reactjs cordova cordova-plugins

【解决方案1】：

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

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

PaymentPlugin.pay(payRequest, paySuccess, payFail);

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

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

【讨论】：

那么你是说如果我要使用cordova.plugins.notification.local.schedule 我必须改为window.plugins.notification.local.schedule 吗？
不，你使用window.cordova.plugins.notification.local.schedule
嗨，我遇到了类似的问题，我必须在 react js 应用程序中使用 Cordova 插件（如果代码在 Web 中运行，则使用一个功能，而在手机上使用另一个）。您能否详细说明您的解决方案？
@Sarotobi 你能找到同样的解决方案吗？

【解决方案2】：

我试图按照@Lateefah 建议的相同解决方案来访问本地通知插件，但 window.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的public文件夹下index.html的body标签中添加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;

【讨论】：