反应导航-嵌套重定向

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

[从任何屏幕，我想导航到ItemDetailScreen中找到的AccountStackNavigator，比方说，我想从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，效果很好。