Question

学习React Native，我遇到了一个使用createBottomTabNavigator的导航问题。我的屏幕显示在底部选项卡上，带有2个链接。链接1-小说，链接2-简介。当我单击链接2时，我想转到个人资料屏幕（确实如此），但是我想用一个新的（而不是）替换底部的标签。我已经尝试使用tabPress事件，并且可以使用console.log看到它捕获了该事件，但是当我添加导航参数时，它将停止工作。

这是相关代码：



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

我想要发生的是，当用户按下TabNavigation堆栈上的“个人资料”标签时，导航会带用户显示ProfileNavigation，我可以在其中添加其他个人资料标签，但我无法将其钩住正确地。一直在查看有关它的文档和其他文章，但仍然停留。

在此先感谢您的帮助

Answer 1

和往常一样，一旦您寻求帮助，您就会得到答案。在此处（https://reactnavigation.org/docs/bottom-tab-navigator/）和此处（https://reactnavigation.org/docs/stack-actions/#replace）的文档中，我可以自定义tabBar并使用navigation.replace。好的ole文档，我到处都是，只是没看到。

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

1 个答案: