Получить текущее состояние навигации в React Native, используя реагирующую навигацию с Redux - PullRequest
0 голосов
/ 15 апреля 2019

Я унаследовал существующее приложение 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), и примеры очень просты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...