Я унаследовал существующее приложение React Native, используя react-navigation
для маршрутизации и react-navigation-redux-helpers
для подключения к хранилищу Redux. У меня возникли проблемы с правильной реализацией кнопки возврата Android.
Структура экрана выглядит примерно так:
StackNavigator // Root
- StackNavigator // Authenticated routes
- StackNavigator // Main screens
- BottomTabNavigator // Main screens
- StackNavigator // Profile screen
- ... // Subscreens
- StackNavigator // Friends screen
- ... // Subscreens
- StackNavigator // Notifications screen
- ... // Subscreens
- Component // Overlay screen
- Component // Overlay screen
- Component // Overlay screen
- Component // Overlay screen
- Component // Overlay screen
- Component // Overlay screen
- StackNavigator // Login routes
- Component // Loading screen
Я изменил пример здесь: https://github.com/react-navigation/react-navigation-redux-helpers#back-button, чтобы также работать с новым createReduxContainer
API:
const RootNavigator = createStackNavigator(/* ... */);
class AppNavigator extends createReduxContainer(RootNavigator) {
componentDidMount() {
super.componentDidMount && super.componentDidMount();
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
super.componentWillUnmount && super.componentWillUnmount();
}
onBackButtonPressAndroid = () => {
const { dispatch } = this.props;
const { state } = this.getCurrentNavigation();
// ... do something with state
dispatch(NavigationActions.back());
return true;
};
}
const mapStateToProps = state => ({
state: state.navigation,
});
export default connect(mapStateToProps)(AppNavigator);
Это работает по большей части - однако я не могу найти способ узнать, нахожусь ли я в «начале» истории навигации, чтобы я мог позволить приложению завершиться. Я хотел бы использовать свойство state
, но это дает мне состояние навигации корневого StackNavigator, поэтому свойство routes
всегда имеет длину 1 (содержащую StackNavigator с «аутентифицированными маршрутами»).
Есть ли способ обработать это более изящно с помощью react-navigation-redux-helpers
или каким-либо образом изменить структуру маршрутизатора? Мне не удалось найти наилучшую практику для этой комбинации (react-navigation
+ react-navigation-redux-helpers
), и примеры очень просты.