React Navigation - 嵌套重定向

Question

我有以下导航结构

const HomeTabNavigator = () => (
    <Tab.Navigator>
        <Tab.Screen name="HomeStackNavigator"/>
        <Tab.Screen name="SearchStackNavigator"/>
        <Tab.Screen name="AccountStackNavigator" />
    </Tab.Navigator>
);

const HomeStackNavigator = () => {
    return (
        <HomeStack.Navigator headerMode="none">
            <HomeStack.Screen name="HomeScreen" component={HomeScreen}/>
        </HomeStack.Navigator>
    )
}

const SearchStackNavigator = () => {
    return (
        <SearchStack.Navigator headerMode="none">
            <SearchStack.Screen name="SearchScreen" component={SearchScreen}/>
            <SearchStack.Screen name="SearchDetailScreen" component={SearchDetailScreen}/>
        </SearchStack.Navigator>
    );
}

const AccountStackNavigator = () => {
    return(  
        <AccountStack.Navigator headerMode="none">
            <AccountStack.Screen name="AccountScreen" component={AccountScreen}/>
            <AppointmentStack.Screen name="ItemListScreen" component={ItemListScreen}/>
            <AppointmentStack.Screen name="ItemDetailScreen" component={ItemDetailScreen}/>
        </AccountStack.Navigator>
    );
}

我想从任何屏幕导航到 AccountStackNavigator 中的 ItemDetailScreen，比方说，我想从 HomeScreen 导航。但是，当我单击 ItemDetailScreen 的后退按钮时，它必须将我重定向到 ItemListScreen 并且此屏幕上的后退按钮必须将我重定向到 AccountScreen.

我正在使用以下屏幕进行重定向。

this.props.navigation.navigate('AccountStackNavigator', {
    screen: 'AppointmentListScreen',
    params: {
        screen: 'AccountScreen'
    }
});

这会将我从 HomeScreen 重定向到 AppointmentListScreen，当我单击返回此处时，它会将我重定向到 AccountScreen，这非常完美。现在这是我的问题，当我使用这段代码时。

this.props.navigation.navigate('AccountStackNavigator', {
    screen: 'AppointmentDetailScreen',
    params: {
        screen: 'AppointmentListScreen',
        params: {
            screen: 'AccountScreen'
        }
    }
});

它完美地将我重定向到 AppointmentDetailScreen，但是，当我单击此处的后退按钮时，它会将我重定向到 HomeScreen，而我希望它按照以下流程重定向。

AppointmentDetailScreen > AppointmentListScreen > AccountScreen

我已经尝试了很多方法来实现这一点，但似乎没有什么对我有用，请任何人在正确的方向上提供帮助。

谢谢。

Answer 1

使用 @react-navigation/bottom-tabs 实现此目的令人沮丧，主要是因为它缺少切换屏幕之间的动画，给用户一种奇怪的体验，因此我转向 @react-navigation/material-top-tabs 并且效果很好。

React Navigation - 嵌套重定向

React Navigation - Nested Redirect

react-native

react-navigation

react-navigation-v5