如何使用 React navigation v5 从另一个选项卡导航到一个选项卡

Question

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

1. 主堆栈

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>
    );
};

2. 存储堆栈

const StoreNavigator = createStackNavigator();

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

3. 社区堆栈

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-navigation/bottom-tabs": "^5.8.0
• @react-navigation/native": "^5.7.3
• @react-navigation/stack": "^5.9.0

Answer 1

在这种情况下，以下内容应该有效：

navigation.navigate('CommunityTab', { screen: 'CommunityReply' });

Answer 2

可以使用这个：

const jumpToAction = TabActions.jumpTo('CommunityReply');  navigation.dispatch(jumpToAction); navigation.navigate(SCREEN_NAMES.MainTabsScreen);