如何使用反应导航 v5 从另一个选项卡导航到一个选项卡

Posted

技术标签:

【中文标题】如何使用反应导航 v5 从另一个选项卡导航到一个选项卡【英文标题】:How do navigate to a tab from another tab using react navigation v5 【发布时间】:2020-12-13 09:48:25 【问题描述】:

我有 3 个选项卡,每个选项卡都包含一组堆栈导航器。

    首页堆栈
    const HomeNavigator = createStackNavigator();

    const HomeStackNavigator = (navigation, route) => 
      return (
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name="Home"
            component=Home
          />
          <HomeNavigator.Screen
            name="Profile"
            component=Profile
          />
          <HomeNavigator.Screen
            name="Settings"
            component=Settings
          />
        </HomeNavigator.Navigator>
      );
    ;

    存储堆栈

    const StoreNavigator = createStackNavigator();

    const StoreStackNavigator = (navigation, route) => 
      return (
        <StoreNavigator.Navigator>
          <StoreNavigator.Screen
            name="OurStore"
            component=Store
          />
        </StoreNavigator.Navigator>
      );
    ;

    社区堆栈
    const CommunityNavigator = createStackNavigator();

    const CommunityStackNavigator = (navigation, route) => 
      return (
        <CommunityNavigator.Navigator>
          <CommunityNavigator.Screen
            name="Community"
            component=Community
          />
          <CommunityNavigator.Screen
            name="CommunityReply"
            component=CommunityReply
            options=communityReplyOptions
          />
          <CommunityNavigator.Screen
            name="AskCommunity"
            component=AskCommunity
          />
        </CommunityNavigator.Navigator>
      );
    ;

标签导航器


    const MainNavigator = createBottomTabNavigator();

    const MainTabNavigator = () => 
      return (
        <MainNavigator.Navigator
          screenOptions=tabScreenOptions
          tabBarOptions=tabBarOptions>
          <MainNavigator.Screen
            name="HomeTab"
            component=HomeStackNavigator
            options=tabBarLabel: 'Home'
          />
          <MainNavigator.Screen
            name="StoreTab"
            component=StoreStackNavigator
            options=tabBarLabel: 'Store'
          />
          <MainNavigator.Screen
            name="CommunityTab"
            component=CommunityStackNavigator
            options=tabBarLabel: 'Community'
          />
        </MainNavigator.Navigator>
      );
    ;

现在单击按钮时的主页选项卡我需要导航到社区选项卡导航器内的社区回复屏幕。有人可以帮我解决这个问题吗

React 导航版本

"@react-navigation/bottom-tabs": "^5.8.0"

"@react-navigation/native": "^5.7.3"

"@react-navigation/stack": "^5.9.0"

【问题讨论】:

【参考方案1】:

以下应该在这种情况下工作:

this.props.navigation.navigate('CommunityTab',  screen: 'CommunityReply' );

【讨论】:

你知道navigation.reset怎么做吗?我是这样做的,但是没有用。 this.props.navigation.reset( index: 0, routes: [name: 'CommunityTab', screen: 'CommunityReply'], ) 试试这个 - ***.com/a/63528641/7022711 谢谢,它很有效

以上是关于如何使用反应导航 v5 从另一个选项卡导航到一个选项卡的主要内容,如果未能解决你的问题,请参考以下文章

使用 Bootstrap 导航选项卡从另一个选项卡跳转到特定选项卡

Flutter 导航栏 - 从另一个页面更改选项卡

如何在本机反应中转到顶部选项卡导航中的另一个屏幕

如何导航到不在选项卡导航器中的本机反应页面?

从嵌套屏幕导航到不同选项卡堆栈中的另一个嵌套屏幕(反应导航)

反应导航选项卡导航器特定选项卡自定义