NativeScript-vue 添加插件失败答案

【问题标题】：NativeScript-vue add plugin failNativeScript-vue 添加插件失败
【发布时间】：2019-07-09 08:20:43
【问题描述】：

我有一个关于安装 pluin 的问题……尝试了 2 周，但仍然没有得到它。

我在 {NS}-vue 上使用 nativescript-barcodescanner，在我 npm 安装它之后，我使用 rm -rf platform，并在 app.js 文件中添加 Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)。在 Home.vue 中，我添加了

<BarcodeScanner
    row="1"
    height="300"
    formats="QR_CODE, EAN_13, UPC_A"
    beepOnScan="true"
    reportDuplicates="true"
    preferFrontCamera="false"
    @scanResult="onScanResult"
    v-if="isIOS">
</BarcodeScanner>

并删除 v-if 并创建 onScanResult 方法。并添加import { BarcodeScanner } from "nativescript-barcodescanner";

在我做完所有事情后，我仍然收到以下错误：

谁能帮帮我？我尝试了很多插件，但仍然失败。（看过一些 youtube 视频）

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.BXBQRCodeScanner/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

TypeError: viewClass is not a constructor
File: "file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js, line: 4225, column: 6

StackTrace: 
    Frame: function:'ElementNode', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 8654, column: 24
    Frame: function:'createElement', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 8745, column: 12
    Frame: function:'createElement', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 8804, column: 23
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5419, column: 79
    Frame: function:'createChildren', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5538, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5424, column: 9
    Frame: function:'createChildren', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5538, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5424, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'init', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 12455, column: 13
    Frame: function:'createComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5452, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5401, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'init', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 12455, column: 13
    Frame: function:'createComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5452, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5401, column: 9
    Frame: function:'createChildren', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5538, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5424, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'init', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 12455, column: 13
    Frame: function:'createComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5452, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5401, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13494, column: 10
    Frame: function:'Observable.notify', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 17945, column: 15
    Frame: function:'notifyLaunch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 39801, column: 15
    Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 39734, column: 20
    Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 39568, column: 10
    Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 36930, column: 21


    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2913)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3048)
    at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)
    at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
    at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1808)
    at android.os.Handler.dispatchMessage(Handler.java:106)
    at android.os.Looper.loop(Looper.java:193)
    at android.app.ActivityThread.main(ActivityThread.java:6669)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: com.tns.NativeScriptException: 
Calling js method onCreate failed

TypeError: viewClass is not a constructor
File: "file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js, line: 4225, column: 6

StackTrace: 
    Frame: function:'ElementNode', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 8654, column: 24
    Frame: function:'createElement', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 8745, column: 12
    Frame: function:'createElement', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 8804, column: 23
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5419, column: 79
    Frame: function:'createChildren', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5538, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5424, column: 9
    Frame: function:'createChildren', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5538, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5424, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'init', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 12455, column: 13
    Frame: function:'createComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5452, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5401, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'init', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 12455, column: 13
    Frame: function:'createComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5452, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5401, column: 9
    Frame: function:'createChildren', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5538, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5424, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'init', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 12455, column: 13
    Frame: function:'createComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5452, column: 9
    Frame: function:'createElm', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5401, column: 9
    Frame: function:'patch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5999, column: 7
    Frame: function:'Vue._update', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5025, column: 19
    Frame: function:'updateComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5137, column: 10
    Frame: function:'get', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4220, column: 25
    Frame: function:'Watcher', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 4207, column: 45
    Frame: function:'mountComponent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 5143, column: 3
    Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13478, column: 10
    Frame: function:'', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 13494, column: 10
    Frame: function:'Observable.notify', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 17945, column: 15
    Frame: function:'notifyLaunch', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 39801, column: 15
    Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 39734, column: 20
    Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 39568, column: 10
    Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.BXBQRCodeScanner/files/app/vendor.js', line: 36930, column: 21


    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1120)
    at com.tns.Runtime.callJSMethodImpl(Runtime.java:1000)
    at com.tns.Runtime.callJSMethod(Runtime.java:987)
    at com.tns.Runtime.callJSMethod(Runtime.java:967)
    at com.tns.Runtime.callJSMethod(Runtime.java:959)
    at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:18)
    at android.app.Activity.performCreate(Activity.java:7136)
    at android.app.Activity.performCreate(Activity.java:7127)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1271)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2893)
    ... 11 more

【问题讨论】：

标签： android nativescript nativescript-plugin nativescript-vue

【解决方案1】：

您是否在GridLayout 中使用BarcodeScanner 视图，因为我看到它具有GridLayout 的row 属性？

或者试试插件的demo app，如果能用的话link

【讨论】：

【解决方案2】：

<BarcodeScanner
    row="1"
    height="300"
    formats="QR_CODE, EAN_13, UPC_A"
    beepOnScan="true"
    reportDuplicates="true"
    preferFrontCamera="false"
    @scanResult="onScanResult"
    v-if="isIOS">
</BarcodeScanner>

您不能直接删除v-if="isIOS"。
<BarcodeScanner> 组件仅在 iOS 中可用。
所以只需在 Vue 模板代码中保留 v-if="isIOS"。

【讨论】：