Question

我继承了一个现有的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）。 / p>

是否可以通过react-navigation-redux-helpers或通过某种方式更改路由器结构来更优雅地处理此问题？对于这种组合（react-navigation + react-navigation-redux-helpers），我还没有真正找到最佳实践，示例非常简单。

使用带有Redux的react-navigation

0 个答案: