时间戳

首页 > 解决方案 > React Navigation - 嵌套重定向

react-native - React Navigation - 嵌套重定向

问题描述

我有以下导航结构

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

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

谢谢你。

标签： react-nativereact-navigationreact-navigation-v5

解决方案

使用它来实现这一点很令人沮丧@react-navigation/bottom-tabs，主要是因为它在切换屏幕之间缺乏动画，给用户一种奇怪的体验，因此我搬到了@react-navigation/material-top-tabs它，它运行良好。

推荐阅读