react-navigation-v5

问题 In my navigation file , when I want to toggle drawer , get the following error : TypeError: navigation.openDrawer is not a function.(In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined) This is my drawer: const DrawerNavigator = () => { return ( <Drawer.Navigator initialRouteName="MYSHIFT" > <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} /> </Drawer.Navigator> ) } And this is my container navigation : const CareworkerNavigation = () => { return ( <NavigationContainer

问题 I'm using material Bottom Tab Navigator, My app is structured such that, some tabs contain a stack navigator. I want to hide the bottom tabs when a user navigates to another stack in the stack navigator. I'm using react navigation v5. I don't want the bottom tabs showing when a user has already navigated to a stack. 回答1: I made you a basic example of what you're asking. I hope this what you're looking for : import React from 'react' import { Button, View, Text, StyleSheet } from 'react-native

问题 The structure of my react navigation is like this : BottomTabNavigator => Navigator => Components This is the skeleton of the App.js. The whole application is wrapped up in a bottom tab navigation. import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const BottomTab = createBottomTabNavigator(); function App() { return ( <NavigationContainer> <BottomTab.Navigator > <BottomTab.Screen name="Main" component={MyVeranda} options={{ tabBarLabel: 'Home', tabBarIcon: //...some

问题 I’m using materialTopTabs and it seems like this loads all the screens in the navigator once its mounted. I have a screen List and inside it a tab navigator with 2 screens: Posts and Users . These two screen both depend on params passed from List . However, i am only able to pass params to one of the screens using this method: navigation.navigate('PostsTabNav', { params: { network: item, }, screen: 'NetworkPosts' //or NetworkUsers }); I have tried to pass the params to my navigator directly

问题 I’m using materialTopTabs and it seems like this loads all the screens in the navigator once its mounted. I have a screen List and inside it a tab navigator with 2 screens: Posts and Users . These two screen both depend on params passed from List . However, i am only able to pass params to one of the screens using this method: navigation.navigate('PostsTabNav', { params: { network: item, }, screen: 'NetworkPosts' //or NetworkUsers }); I have tried to pass the params to my navigator directly

问题 I am creating a React Native app using React Navigation version 5, and I have a bottom tab navigator with a stack navigator nested inside each screen of the tab navigator. I only want the bottom tab bar to show when on the first page of each stack navigator. Here is a snack that displays my app's basic navigation functionality: https://snack.expo.io/@brforest/hide-tab-1. Per the bottom tab documentation, there is a tabBarVisible options attribute, but: Hiding tab bar can cause glitches and

问题 I would like to use the current theme in my class component. According to the latest (RN 5.x) documentation, there is a useTheme() hook for that purposes. However, it doesn't mention any class equivalent. I found ThemeContext.Consumer in RN 4.x but it is not available in 5.x anymore. Is it possible to achieve the effect of useTheme() in some other way for a class component? 回答1: This is not so elegant, but it will do the job for you. Here is my method to access the theme inside a class

问题 If I'm using React Navigation v5, what is the best way to pass the current state of a parent component (in my case, the main App) down through a Tab and Stack navigator to a screen that I'd like to use the current state in? Following the documentation, I have created a stack navigator for each tab that holds the respective screens. App.js contains a state that needs to be used for a few things. Most importantly, it will provide badge count on the Tab navigator, as well as be a source of

问题 It was previously possible to open a specific drawer from a button, using getCustomActionCreators , prior to v5 of React Navigation. An example of doing that is here: React Native two drawers on one screen However, it looks like this function has been removed. Is there a way to do this in React Navigation 5? 回答1: This is possible by creating a custom router. Here are a few key pieces of insight: navigators bubble up actions which they don't handle. This means that we need to create a custom

问题 I'm migrating a React Native application from react-navigation 4 to 5.x and i can't find which package contains createSwitchNavigation. Specifically i have doubts with the auth token check part. With react-navigation 4 i had: const switchNavigator = createSwitchNavigator({ ResolveAuth: ResolveAuthScreen, signinFlow: createStackNavigator({ Signup: SignupScreen, Signin: SigninScreen, }), appFlow: createBottomTabNavigator({ TrackCreate: TrackCreateScreen, trackListFlow: createStackNavigator({