React Navigation 远离 TabNavigator答案

【问题标题】：React Navigation navigate away from TabNavigatorReact Navigation 远离 TabNavigator
【发布时间】：2018-11-01 22:02:00
【问题描述】：

我正在为我的 react native 应用程序使用 React Navigation。

我的根栈如下：

const AuthStack = createStackNavigator({
  Authentication: {
    screen: Authentication,
  },
  Login: {
    screen: Login,
  },
  Register: {
    screen: Register,
  },
});

const AppStack = createStackNavigator({
  Main: {
    screen: Main,
  },
});

export const RootNav = createSwitchNavigator(
  {
    AuthLoading: {
      screen: AuthLoadingScreen,
    },
    App: {
      screen: AppStack,
    },
    Auth: {
      screen: AuthStack,
    },
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

Main是一个标签导航器，有3个堆栈导航器，如下：

const FeedStack = createStackNavigator({
  Feed: {
    screen: Feed,
  },
});

const ExploreStack = createStackNavigator({
  Explore: {
    screen: Explore,
  },
});

const AccountStack = createStackNavigator({
  Account: {
    screen: Account,
  },
});

const NavBar = createBottomTabNavigator(
  {
    Feed: {
      screen: FeedStack,
    },
    Explore: {
      screen: ExploreStack,
    },
    Account: {
      screen: AccountStack,
    },
  }
}

我的问题在于帐户堆栈。在“帐户”屏幕下方找到注销按钮，但是当我拨打 this.props.navigation.navigate('Auth') 时，什么也没有发生。

我尝试过使用this.props.navigation.reset() 和this.props.navigation.dispatch()，但它们都不起作用。

有谁知道当用户注销时如何切换回身份验证堆栈？

【问题讨论】：

您找到解决方案了吗？我想我遇到了同样的事情，努力“退出”嵌套堆栈并从切换导航器导航返回到另一条路线。
@tdous 是的，我最终将切换导航器作为道具传递给我的不同堆栈，然后就可以使用它了
谢谢。实际上，我已经设法使用最近的更改使其正常工作，而无需道具。如果有人觉得它有用，我会把它作为答案。

标签： react-native react-navigation

【解决方案1】：

我认为我的情况类似，代码中有一个最近记录的功能，但该功能没有被导出，并且仅在 5 天前修复 - 它似乎对我有用。

导入 SwitchActions...

import { SwitchActions } from 'react-navigation;

...并使用 jumpTo 方法：

this.props.navigation.dispatch(SwitchActions.jumpTo({ routeName: 'Auth' }));

我在一个嵌套在堆栈导航器深处的组件中执行此操作，以返回父切换导航器中的前一个屏幕，所以也许它对你有用。

此处引用：https://reactnavigation.org/docs/en/switch-actions.html#jumpto

【讨论】：

【解决方案2】：

我的情况类似，当我尝试直接从主屏幕上的嵌套导航导航时使用抽屉。按下主页按钮后它保持在同一屏幕上，我该如何在这里实现这一点

import bottomnavigation from 'bottomnavigation_file' //bottomtap file code in drawer index file 

    <Drawer.Navigator 
    drawerContent={props => <DrawerContain {...props} />} //DrawerContain 
    different file
       drawerContentOptions={
        {
        // activeTintColor: "#e91e63",
      // itemStyle: { marginVertical: 5 },
    }
    }>
     <Drawer.Screen name="Home" component={bottomnavigation} />

  <Drawer.Navigator >

 //DrawerContain file
 function DrawerContain (){
  const [homenavigation, sethomenavigation] = useState(false)

   const homeNavigation =  (homenavigation)=>{
    sethomenavigation(!homenavigation)
     console.log('navigation home state drawer fun????-------',!homenavigation)
    dispatch(bottom_navigation(!homenavigation))
  // props.navigation.jumpTo('Home')
      homenavigation ? props.navigation.jumpTo('Home') : 
 props.navigation.jumpTo('Home')
  }
  return(
  <DrawerContentScrollView {...props}>
      {/* <DrawerItemList {...props} /> */}
    <Drawer.Section>
    
    
      <Drawer.Item
        icon={home}
        label="Home"
        onPress={() => homeNavigation(homenavigation)}
      />
 </Drawer.Section>
  </DrawerContentScrollView>
 )
  }

 and finally in stack navigatore file where all navigation defined
// StackNavigatore file
 import Home from '../bottomNavigation/index'; //bottom tap define here
 import Home2 from '../bottomNavigation/index1'; // bottom tap duplicate file same

function StackNavigatore({ navigation }) {
  const Bottom_navigation = useSelector(state => state.user.bottom_navigation);

  return <>
     {!Bottom_navigation ? <Stack.Screen
      name="Manijment"
      component={Home} //bottom navigation file
      options={{
        title: '',
        headerShown: false,
      }}
    /> :
    <Stack.Screen
      name="Home2"
      component={Home2 } // duplicate file of bottom navigation render 
  conditionally 
      options={{
        title: '',
        headerShown: false,
      }}
    />}
  </>
 }

【讨论】：