React Native Navigation v5 底部导航导航到新堆栈

Question

Learning React Native and I've run into a navigation issue using createBottomTabNavigator. I have my screen displayed with 2 links on the bottom tab. Link 1 - Novels, Link 2 - Profile. When I click on Link 2, I want to go to my profile screen (which it does) but I want to replace the bottom tab with a new one (which it doesn't). I've tried using the tabPress event and I can see using console.log that it catches the event, but when I add the navigation param it stops working.

here's the relevant code:

const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();
const headerTitle = "My Title";


function NovelsStack() {
    return (
        <Stack.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: '#000',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 16,
            },
        }}>
            <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: () => <HeaderTitle title={headerTitle} /> }} />
            <Stack.Screen name="Novels" component={TabNavigation} options={{ headerTitle: () => <HeaderTitle title={headerTitle} /> }}  />
            <Stack.Screen name="Novel" component={SelectedNovelNavigation} options={{ headerTitle: () => <HeaderTitle /> }} />
            <Stack.Screen name="Profile" component={ProfileNavigation} options={{ headerTitle: () => <HeaderTitle title={headerTitle} /> }} />
        </Stack.Navigator>
    );
}


function TabNavigation() {
    return (
        <BottomTab.Navigator
            tabBarOptions={{
                labelStyle: styles.mainTabBarLabels
            }}
        >
            <BottomTab.Screen name="Novels" options={{ title: "Novels" }} component={NovelsScreen} />
            {isAuthenticatedUser() ? (<BottomTab.Screen name="Profile" component={ProfileScreen} />)
                : (<BottomTab.Screen name="Login" component={LoginScreen} listeners={({ navigation, route }) => ({
                    tabPress: e => {
                      // Prevent default action                      
                      console.log(navigation)
                      e.preventDefault();
                
                    },
                  })}  />)
            }
        </BottomTab.Navigator>
    );
}


function ProfileNavigation() {
    return (
        <BottomTab.Navigator
            tabBarOptions={{
                labelStyle: styles.novelsTabBarLabels
            }}>
            <BottomTab.Screen name="Profile" component={ProfileScreen} options={{ title: "Profile" }} />
        </BottomTab.Navigator>
    );
}

function SelectedNovelNavigation() {
    return (
        <BottomTab.Navigator
            tabBarOptions={{
                labelStyle: styles.novelsTabBarLabels
            }}>
            <BottomTab.Screen name="Novel" component={NovelScreen} />
            <BottomTab.Screen name="Comments" component={CommentsScreen} options={{ title: "Comments" }} />
            <BottomTab.Screen name="Ratings" component={RatingsScreen} options={{ title: "Ratings" }} />
            <BottomTab.Screen name="Related" component={RelatedNovelsScreen} options={{ title: "Related" }} />
        </BottomTab.Navigator>
    )
}

What I want to happen is when the user presses the "Profile" tab on the TabNavigation Stack, that the navigation takes the user to show the ProfileNavigation where I can add additional profile tabs, but I just can't get that hooked up correctly. Been looking at the docs and other posts about it, but still stuck.

Thanks in advance for any help

Answer 1

As usual, once you reach out for help you get the answer. In the docs here ( https://reactnavigation.org/docs/bottom-tab-navigator/ ) and here ( https://reactnavigation.org/docs/stack-actions/#replace ) I can customize the tabBar and use the navigation.replace. The good ole docs, I was all around it, just didn't see it.