Navigation inside vue component with vue-native-router

Question

The vue-native-router docs provide a good example about how to implement a navigation to switch between screens, which works so far in my little demo app that I'm trying to build to get a grasp about how things work.

The basics that are required to navigate from one screen to another, inside a screen vue template, are so far:

<template>
    <view class="o-container">
        <button title="ChangeView" :on-press="goToMyNewFancyView" />
    </view>
</template>

<script>
export default {
    props: {
        navigation: {
            type: Object
        }
    },
    methods: {
        goToMyNewFancyView() {
            this.navigation.navigate('MyNewFancyView');
        }
    }
};
</script>

(I've skipped the main setup of the StackNavigator as this is completely the same as in the docs and not really helpful for this question, see TJ Weems answer).

My aim is now to have a list of components that display a title and a description. By clicking on the component, the screen should be changed to the component's detail view. Thus, I tried to implement the same for my component:

<template>
    <view>
        <text>This is a component.</text>

        <button title="show more" :on-press="show" />
    </view>
</template>

<script>
export default {
    props: {
        navigation: {
            type: Object
        }
    },
    methods: {
        show() {
            this.navigation.navigate('MyShowView');
        }
    }
};

However, this.navigation is undefined inside the vue component. Somehow I don't understand the connections here and could not find anything relatable that would explain this. I'm also not sure if this is the correct way, or if navigation should happen outside of the component at all.

How would one implement a link from a component that is a teaser for a thing to the actual detail screen?

Dependencies:

"dependencies": {
  "expo": "^32.0.0",
  "react": "16.5.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
},
"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "babel-preset-expo": "^5.0.0",
  "vue-native-core": "0.0.8",
  "vue-native-helper": "0.0.10",
  "vue-native-router": "0.0.1-alpha.3",
  "vue-native-scripts": "0.0.14"
},

jplattus · Accepted Answer · 2019-12-12 21:18:13Z

1

To get the params you can use the navigation options. First add some data:

methods: {
        show() {
            this.navigation.navigate('MyShowView', { myData : 'Hi' });
        }
    }

And then your MyShowView, get the data as follows:

this.navigation.getParam("myData");

Wherever you need.

Found this in React Navigation and vue-native-router docs

answered Dec 12, 2019 at 21:18

jplattus

3413 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TJ Weems · Accepted Answer · 2019-05-03 13:32:36Z

0

Did you do this part? or something similar..

<script>
import { StackNavigator } from "vue-native-router";
import HomeScreen from "../src/screens/homeScreen.vue";
import DetailsScreen from "../src/screens/detailsScreen.vue";
const AppNavigation = StackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
export default {
    components: { AppNavigation }
}
</script>

Instance of component

<template>
  <app-navigation></app-navigation>
</template>

answered May 3, 2019 at 13:32

TJ Weems

1,1143 gold badges22 silver badges40 bronze badges

1 Comment

pdu Over a year ago

Yes, that's the part I omitted as described. Navigating from one screen view to another works, it just doesn't work inside a component.

TJ Weems · Accepted Answer · 2019-05-03 14:28:04Z

0

My aim is now to have a list of components that display a title and a description. By clicking on the component, the screen should be changed to the component's detail view. Thus, I tried to implement the same for my component:

Why couldnt you do something like this?

StackNavigator({
  Home: HomeScreen,
  Detail: {
      screen: DetailScreen,
      navigationOptions: {
        title: 'Detail Screen',
        headerStyle: {
          backgroundColor: 'transparent',
        },
      },
    },
})

using the navigationOptions to add a title and description to your list of routing components, you would have this data available to you to display.

each router component would still render the view or screen you have associated with that link.

answered May 3, 2019 at 14:28

TJ Weems

1,1143 gold badges22 silver badges40 bronze badges

1 Comment

pdu Over a year ago

That's not an answer to my question. My question is "how can I get the this.navigation part in my component, which is undefined, in order to be able to navigate within my component. I'm not asking about how to update the title of the screen.

vuenative_newbie · Accepted Answer · 2020-01-11 07:10:05Z

0

Found a fix for mine. Try to change the button to

<button title="show more" :on-press="show" :navigation="this.props.navigation" />

answered Jan 11, 2020 at 7:10

vuenative_newbie

1

Collectives™ on Stack Overflow

Navigation inside vue component with vue-native-router

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related