search

GeekyAnts / vue-native-router

37 stars 24 forks source link

Access to Navigation Options in the Vue Component? #3

Closed aaronksaunders closed 4 years ago

aaronksaunders commented 6 years ago

trying to control the titles on my views and add some buttons, but not sure how to create the static navigationOptions as mentioned in the documentation - https://reactnavigation.org/docs/en/headers.html

husseinabed commented 6 years ago

same here!! is there a work around solution?!

aprezcuba24 commented 6 years ago

I have the same problem :(

xsokev commented 6 years ago

Use the routes. Instead of:

StackNavigator({
  Home: HomeScreen,
  Detail: DetailScreen
})

...use

StackNavigator({
  Home: HomeScreen,
  Detail: {
      screen: DetailScreen,
      navigationOptions: {
        title: 'Detail Screen',
        headerStyle: {
          backgroundColor: 'transparent',
        },
      },
    },
})
adexphem commented 5 years ago

Thanks for that @xsokev

Another question is, what if I want to make the title dynamic?

sweebee commented 5 years ago

any news? How can i change the navigationOptions within a component?

luizmagao commented 5 years ago

how to use inside a component, navigationOptions

RishabhKarnad commented 4 years ago

@adexphem @sweebee @luizmagao You can use the technique suggested here

You will need to wrap your component for this and use static navigationOptions. Due to the limitations of SFC syntax, you will need to create a React component that wraps your Vue component and holds the navigation options and header state.

For example, if you wish to have a dynamic title on DetailsScreen, you would need to create a React component wrapper around it and use that in the Navigator. This wrapper would render your DetailsScreen in its render method and contain the navigation options and state.