nativescript-vue / nativescript-vue-navigator

A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
MIT License
98 stars 10 forks source link

Compatibility with RadSideDrawer in a NS-Vue app? #66

Closed michaelsmedley closed 3 years ago

michaelsmedley commented 3 years ago

Hi

I have an app that is using the RadSideDrawer component to open up a sidebar on button click. I am struggling to get this to work with the setup I have.

My App.vue template currently looks like this:

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

</template>

So my initial instinct was to replace the tag with the tag, however this just loads a blank screen for me. If I move the above RadSideDrawer logic into a page (such as ./components/HomePage.vue) then the app crashes instantly for me.

Any help will be much appreciated

rigor789 commented 3 years ago

If you are using the navigator - replace

<Frame ~mainContent ref="drawerMainContent">
  <slot name="mainContent" />
</Frame>

with

<Navigator ~mainContent  />

But that may not be all - share more of the project if still having issues. (This is easier to answer on Slack/Discord rather than an issue)

michaelsmedley commented 3 years ago

@rigor789 Hey, I really appreciate the response.

That simple line you sent me seems to have done the trick, at least for the few different frames I have tried!

Many thanks again - you have spared me several more hours looking into it!!