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

【问题标题】：nativescript-ui-sidedrawer - Issue loading in iOS: TypeError: Could not load view for: NativeRadSideDrawernativescript-ui-sidedrawer - 在 iOS 中加载问题：TypeError：无法加载视图：NativeRadSideDrawer
【发布时间】：2020-08-12 13:49:50
【问题描述】：

在使用 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 使用的模板代码以及我自己的实现，但我仍然遇到同样的错误。

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

【问题讨论】：

对于 $refs 问题，共享您的代码（主要是模板代码）会有所帮助，因为元素放置至关重要，因为抽屉需要位于根视图中。请这个解释 - stackoverflow.com/questions/61125406/… - 关于如何正确设置nativescript-angular抽屉，虽然你正在使用vue，但也许这可以帮助你。
针对iOS模拟器运行时出现的问题，您是否尝试过使用tns run ios --bundle --no-hmr运行？
试试8.0.1版

标签： nativescript nativescript-vue

【解决方案1】：

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

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

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

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

注意：如果您的插件无法立即运行，您可能需要通过删除平台文件夹来清理项目：

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();

【讨论】：

页面元素在哪里？
我不确定你的问题是什么？
App.vue 必须有元素

【解决方案2】：

抱歉，有一段时间没接触电脑了，所以才回来看看这个

不幸的是，我没有得到一个完整的解决方案，我所做的只是对demo app that nativescript vue provides进行逆向工程

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

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

【讨论】：