反应导航远离TabNavigator导航

Question

我正在使用React导航作为我的for本机应用程序。

我的根堆栈如下：

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()，但它们都不起作用。

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

Answer 1

我认为我的情况是相似的，最近有一个被记录在代码中的特性，但是这个函数并没有被导出，而这个功能在5天前才被修复--它似乎对我有用。

进口SwitchActions..。

import { SwitchActions } from 'react-navigation;

...and使用jumpTo方法：

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

我在嵌套在堆栈导航器中的组件中这样做，以便回到父开关导航器中的前一个屏幕，所以它可能对您有用。

参考：https://reactnavigation.org/docs/en/switch-actions.html#jumpto

Answer 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,
      }}
    />}
  </>
 }