react-native - 使用 React Navigation 实现 UISplitViewController

Question

我需要在我正在开发的 React Native 应用程序中实现平板电脑支持。我们决定使用 UISplitViewController对我们来说最有意义，但是 React Navigation (https://reactnavigation.org) 没有任何支持。

我尝试通过将 2 个导航器并排放置在 View 中并修改其 getStateForAction 以直接的方式解决此问题。在详细信息 View 中打开某些屏幕:

export interface Props {
  MasterNavigator: NavigationContainer;
  DetailNavigator: NavigationContainer;
  detailRouteNames: string[];
}

export class MasterDetailView extends React.Component<Props> {
  masterNavigator: any;
  detailNavigator: any;

  componentDidMount() {
    const { MasterNavigator, DetailNavigator, detailRouteNames } = this.props;
    const defaultMasterGetStateForAction = MasterNavigator.router.getStateForAction;

    MasterNavigator.router.getStateForAction = (action: any, state: any) => {
      if (action.type === NavigationActions.NAVIGATE && detailRouteNames.indexOf(action.routeName) !== -1) {
        action.params.isRootScreen = true;
        this.detailNavigator.dispatch(NavigationActions.reset({ index: 0, actions: [action] }));

        return state;
      }

      return defaultMasterGetStateForAction(action, state);
    };

    const defaultDetailGetStateForAction = DetailNavigator.router.getStateForAction;

    DetailNavigator.router.getStateForAction = (action: any, state: any) => {
      if (action.type === NavigationActions.BACK && state.routes.length === 1) {
        this.masterNavigator.dispatch(NavigationActions.back());
        return null;
      }

      return defaultDetailGetStateForAction(action, state);
    };
  }

  render() {
    const { MasterNavigator, DetailNavigator } = this.props;

    return (
      <View style={styles.view}>
        <View style={styles.masterContainer}>
          <MasterNavigator ref={(mn: any) => this.masterNavigator = mn}/>
        </View>
        <View style={styles.divider}/>
        <View style={styles.detailContainer}>
          <DetailNavigator ref={(dn: any) => this.detailNavigator = dn}/>
        </View>
      </View>
    );
  }
}

主导航器是 TabNavigator与 StackNavigator s 在每个选项卡中，详细导航器是 StackNavigator .这是它的外观:


这种方法可行，但 Android 上的后退按钮行为不正确。我希望它在详细信息导航器中导航回来，然后在主导航器中导航。可以通过一些技巧使其工作，但是使用后退按钮从应用程序导航回来变得不可能(由于某种原因，当我单击它时没有任何 react )。我可以尝试通过覆盖后退按钮的行为并将后退操作分派(dispatch)给主/详细导航器或关闭应用程序来解决此问题，但是在将操作分派(dispatch)给导航器时，无法知道它是否响应它(特别是对于主导航器，它是 TabNavigator )，所以看起来我被卡住了。

以这种方式使用导航器时是否有一些特殊的注意事项？ React Navigation 是否适合这个用例？如果没有，还有哪些其他方法可以模拟 UISplitViewController在 React Native 应用程序中？

Answer 1

不正确的后退按钮行为问题是我的错。其中一个屏幕有一个返回按钮处理程序，它总是返回 true ，从而消耗所有后退按钮按下(duh!)。我修复了这个问题并将以下后退按钮处理程序添加到 MasterDetailView :

private onPressBack = (): boolean => {
    const action = NavigationActions.back();
    return this.detailNavigator.dispatch(action) || this.masterNavigator.dispatch(action);
};

是的，有一种方法可以确定导航器是否执行了操作: navigator.dispatch(action)返回 true如果事件被消费并且 false除此以外。

修复后退按钮的问题后，此设置将模拟 UISplitViewController挺好的。