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

Я пробовал так много способов добиться этого, но, похоже, у меня ничего не работает, может ли кто-нибудь помочь в правильном направлении, пожалуйста.

Спасибо.


person Ibrahim Azhar Armar    schedule 27.05.2020    source источник


Ответы (1)


Было неприятно использовать @react-navigation/bottom-tabs для достижения этого, главным образом потому, что в нем отсутствует анимация между переключением экранов, что дает пользователю странный опыт, поэтому я перешел на @react-navigation/material-top-tabs, и это сработало хорошо.

person Ibrahim Azhar Armar    schedule 31.05.2020