phonegap 的 nfc 插件对象在我的一个 javascript 文件中抛出异常答案

【问题标题】：phonegap's nfc plugin object is throwing exception in one of my javascript filephonegap 的 nfc 插件对象在我的一个 javascript 文件中抛出异常
【发布时间】：2018-12-31 19:12:07
【问题描述】：

我正在使用cordova + react js 作为实现 NFC（近场通信）的一部分，我下载了 phonegap-nfc 插件但是当我尝试使用 phonegap 的 nfc 插件对象变量时，在我的一个 javascript 文件中抛出异常。喜欢（从'phonegap-nfc/www/phonegap-nfc'导入nfc；）收到的错误是：

找不到模块：错误：无法解析 'D:\GIT\lockers-app-ret 中的 'cordova/exec' ail-wf_latest\node_modules\phonegap-nfc\www'

下面给出的相关代码

处理NFCPopup = () =>{ console.log("hello jb you are in NFC pop up...");

// Read NDEF formatted NFC Tags
nfc.addNdefListener (
    (nfcEvent) =>{
        var tag = nfcEvent.tag,
            ndefMessage = tag.ndefMessage;

        // dump the raw json of the message
        // note: real code will need to decode
        // the payload from each record
        alert(JSON.stringify(ndefMessage));

        // assuming the first record in the message has
        // a payload that can be converted to a string.
        alert(nfc.bytesToString(ndefMessage[0].payload).substring(3));
    },
     () => { // success callback
        alert("Waiting for NDEF tag");
    },
    (error) =>{ // error callback
        alert("Error adding NDEF listener " + JSON.stringify(error));
    }
);

}

【问题讨论】：

标签： javascript reactjs cordova phonegap-plugins

【解决方案1】：

如果您使用 Cordova，并使用 cordova plugin add phonegap-nfc 安装插件，Cordova 将创建一个全局变量 nfc（或 window.nfc，如果您愿意。）您不需要自己导入 phonegap-nfc.js。在 Cordova 工具包装它之前，该文件并不是真正的模块。此外，请确保在 Cordova 的 deviceready 事件触发之前，不要调用 nfc 上的任何函数。

【讨论】：

【解决方案2】：

doncoleman 的回答非常好，我只是补充一点，以确保您在 Cordova 的 deviceready 事件之前不会在 nfc 上调用任何函数，您可以在 index.tsx 中替换这一行：

ReactDOM.render(<App />, document.getElementById("root"));

用这个：

document.addEventListener(
    "deviceready",
    () => ReactDOM.render(<App />, document.getElementById("root")),
    false
);

本文中有关 React + NFC + Capacitor 或 Cordova 的更多信息： https://medium.com/@zwyx/nfc-on-android-with-react-and-typescript-using-capacitor-or-cordova-b525dba5f620

【讨论】：