nativescript-ui-sidedrawer-在iOS中加载问题：TypeError：无法加载以下视图：NativeRadSideDrawer

如何解决nativescript-ui-sidedrawer-在iOS中加载问题：TypeError：无法加载以下视图：NativeRadSideDrawer

在使用nativescript-vue构建应用程序时，nativescript-ui-sidedrawer插件存在一个有趣的问题

当我使用tns preview命令预览应用程序时，一切都会按预期进行。但是，每当我尝试使用tns debug ios --bundle在iOS模拟器中运行该应用程序时，尝试查看使用该插件的组件时都会收到以下消息：

TypeError: Could not load view for: NativeRadSideDrawer. TypeError: The superclass is not an object. ../node_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js(file: node_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js:27:66)

另外，如果我尝试切换菜单，则会收到关于找不到$refs的错误消息（由于上述错误似乎使我的应用崩溃，目前我无法获得确切的消息）

我已通过tns plugin add nativescript-ui-sidedrawer添加了插件，并且main.js中包含了以下内容

import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
Vue.use(RadSideDrawer)

我已经尝试使用in the documentation所用的模板代码以及自己的实现，但是仍然遇到相同的错误。

如果有人有任何想法，那么我将不胜感激。同样，如果我可以提供更多信息来帮助对其进行调试，请告诉我

解决方法

您可能正在尝试将RadSideDrawer加载到根框架之外。

下面是一个如何将RadSideDrawer与NativeScript Vue Navigator插件结合使用的示例。

您可以在NativeScript网站上找到有关Navigator的更多信息。

---

如果您仍然遇到问题，则可以在文档中看到：

注意：如果您的插件无法立即使用，则可能需要通过删除Platforms文件夹来清理项目：

rm -rf platforms

https://nativescript-vue.org/en/docs/getting-started/nativescript-plugins/

---

我已经使用nativescript-ui-sidedrawer@8.0.1的当前版本来实现此功能，但以后的版本可能仍可用于该示例

App.vue

<template>
    <Page>
        <RadSideDrawer ref="drawer" drawerLocation="Left" gesturesEnabled="true" :drawerTransition="transition">
            <StackLayout ~drawerContent backgroundColor="#ffffff">
                <slot name="drawerContent"/>
            </StackLayout>
            <StackLayout ~mainContent ref="drawerMainContent">
                <slot name="mainContent"/>
            </StackLayout>
        </RadSideDrawer>
    </Page>
</template>

Home.vue

<template>
    <Page>
        <!-- Your page content -->
    </Page>
</template>

main.ts

import Vue from 'nativescript-vue'
import Navigator from 'nativescript-vue-navigator'
import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
import Home from 'components/Home.vue'

const defaultRoute = loggedIn ? '/' : '/login'

Vue.use(RadSideDrawer)
Vue.use(Navigator,{ routes: { '/': Home } })

new Vue({
    render (h) {
        return h(
          App,[
            h(DrawerContent,{ slot: 'drawerContent' }),h('Navigator',{
                slot: 'mainContent',attrs: {
                    defaultRoute,}
            })
          ]
        )
      }
  }).$start();

,

对不起，离开计算机已有一段时间了，所以回到这个页面

不幸的是，我没有完整的决议要写，我所做的只是对demo app that nativescript vue provides进行反向工程

tns create my-app-name --template tns-template-drawer-navigation-vue

我不太清楚我和他们之间的区别是什么，但这对我来说没有问题