react native中的后退按钮行为错误

Question

伙计们，我有一个关于react native中导航的问题。所以我主要使用TabNavigator。我在应用中有两个主要的堆栈导航器

const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

在ProfileStack屏幕中，我还有两个页面：MyProfile和UsersProfile:

const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen({route, navigation}) {
return (
<ProfileStack.Navigator initialRouteName="MyProfile">
<ProfileStack.Screen name="MyProfile" component={MyProfilePage} />
<ProfileStack.Screen name="UserProfile" component={UserProfilePage} options={{
headerLeft: () => (<View>
<Button title="back" onPress={() => {navigation.goBack()}}/>
</View>)
}}/>
</ProfileStack.Navigator>
);
}

现在我想从HomeScreen导航到UserProfilePage，并将params传递到此屏幕。我是这样做的：

function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home screen this</Text>
<Button
title="Go to another user profile"
onPress={() => navigation.navigate('Profile', {screen: 'UserProfile', params: {userId: 1235}})}
/>
</View>
);
}

现在，当我来到页面UserProfile时，我看到它也加载了Profile页面，就在一秒钟内，我看到ProfilePage及其UI的闪烁并不酷，应该是这样吗？我想不会。然后，如果我按下UsersProfilePage上的BACK按钮，我将导航回主屏幕——这没关系！这就是我所期望的！

但现在，如果我按ProfileTab，我只看到UsersProfilePage，而看不到MyProfilePage。当我再次按下BACK按钮时，我会回到HomeScreen，这对我来说很奇怪。你能解释一下为什么会发生这种情况吗？为什么我不回到MyProfilePage。

我在这里准备了一份世博小吃。你可以重现这种行为。

Answer 1

这是因为您要导航到嵌套导航器中的屏幕。它忽略了初始路线。然后，当你再次按下选项卡时，它仍然是安装的，并且仍然会有以前的路由状态，这只是没有初始屏幕的屏幕。

默认情况下，当您在嵌套导航器中导航屏幕时，指定的屏幕将用作初始屏幕，导航器上的初始路线道具将被忽略。这种行为与React Navigation 4不同。

如果需要渲染导航器中指定的初始路线，可以通过设置initial:false:来禁用使用指定屏幕作为初始屏幕的行为

navigation.navigate('Root', {
screen: 'Settings', 
initial: false,
});

请参阅https://reactnavigation.org/docs/nesting-navigators/#rendering-导航器中定义的初始路线https://reactnavigation.org/docs/navigation-lifecycle/