Обработка обратной навигации в Drawer Navigator в React Navigation
Я успешно создал панель навигации в своем приложении, используя React Navigation V3. Но проблема возникает, когда после того, как я открываю две страницы с помощью ящика, при однократном обратном нажатии страница перенаправляется непосредственно на домашнюю страницу, а не на предыдущую страницу.
Я ожидаю, что поток приложения будет таким же, как у stacknavigator, но функция back() также недоступна в drawernavigator. Вот мой навигатор по ящикам:
const DrawerNavigator = createDrawerNavigator({
Home: {
screen:HomeScreen
},
Events: {
screen: EventsScreen
},
Waste: {
screen: ReportWasteScreen
}
},
DrawerConfig
);
Как я могу изменить код, чтобы при открытии экрана отходов после открытия экрана событий при однократном обратном нажатии страница перенаправлялась на экран событий, а не на главный экран?
Ответы 2
Используйте событие BackHandler для настройки маршрутизации
Я нашел решение, используя навигатор стека внутри навигатора ящиков. Пожалуйста, посмотрите на ответ, который я разместил! Спасибо! :)
Я нашел решение, используя этот ответ в этом связь.
import {createDrawerNavigator, createStackNavigator, createAppContainer} from 'react-navigation'
class App extends Component {
render() {
return (
<View style = {{ flex: 1, backgroundColor: 'transparent' }}>
<AppDrawerNavigator />
</View>
)
}
}
const AppStackNavigator = createStackNavigator({
Home: HomeScreen,
Events: EventsScreen,
Waste: WasteScreen
});
const AppDrawerNavigator = createDrawerNavigator({
Home: AppStackNavigator
});
export default createAppContainer(AppDrawerNavigator);
Это решение создает навигатор стека внутри навигатора ящиков, который заставляет щелкать ссылку в навигаторе ящиков каждый раз, открывая новую страницу. Обратная обработка здесь выполняется автоматически.
Кроме того, чтобы удалить стандартный заголовок навигатора стека, я добавил следующий код:
{
headerMode:'none',
navigationOptions: {
headerVisible: false,
}
}
к AppStackNavigator