React Navigation - Вложенное перенаправление - PullRequest
Новая
       3

React Navigation - Вложенное перенаправление

0 голосов
/ 27 мая 2020

У меня следующая структура навигации 

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

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

Спасибо.

1 Ответ

0 голосов
/ 31 мая 2020

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

...