React Navigation：动态设置`mode`设置（/标题呈现双倍和后退按钮消失）

Question

在我的应用程序中，我有三个屏幕：ScreenA,ScreenB和ScreenC. 它们都应该有一个标题，并且都应该有一个带有前一屏幕名称的后退按钮。我希望ScreenA能够ScreenB使用模态动画打开：

const ModalStack = createStackNavigator(
  {
    ScreenA,
    ScreenB
  },
  {
    initialRouteName: "ScreenA",
    mode: "modal"
  }
);

并且ScreenA还应该能够ScreenC使用默认的从右到左的滑动动画打开。问题是，StackNavigator 已经配置了模态模式。有没有办法动态设置模式？那么使用 from ScreenAto ScreenBmodal 和 from ScreenAto ScreenCcard 吗？

此外，在这种情况下如何处理标题？（对于我问这个问题的原因，请进一步阅读。）

这是我在阅读文档后尝试的。它描述了一个类似的场景。

这是本教程为我翻译的方式：

const SlidingStack = createStackNavigator(
  {
    ScreenA,
    ScreenC
  }
);

const ModalStack = createStackNavigator(
  {
    SlidingStack,
    ScreenB
  },
  {
    mode: "modal"
  }
);

这个解决方案的问题是，当我打开ScreenA. 此外，当我打开模态时ScreenB，后退按钮是空白的。

编辑

在我尝试按照文档解决此问题时，我找到了双标头渲染的解决方案：

const SlidingStack = createStackNavigator(
  {
    ScreenA,
    ScreenC
  }
);

const ModalStack = createStackNavigator(
  {
    SlidingStack,
    ScreenB
  },
  {
    mode: "modal",
    navigationOptions: ({ navigation }) => {
      const options = {}
      if (navigation.state.routeName === "SlidingStack") options["header"] = null;
      return options;
    }
  }
);

这个解决方案的问题是，后退按钮仍然没有任何文字。

编辑：

根据我从 Pritish 学到的，这是我最终得到的代码：

const IOS_MODAL_ROUTES = ["OptionsScreen"];

let dynamicModalTransition = (
  transitionProps: NavigationTransitionProps,
  prevTransitionProps: NavigationTransitionProps
): TransitionConfig => {
  if (
    IOS_MODAL_ROUTES.some(
      screenName =>
        screenName === transitionProps.scene.route.routeName ||
        (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)
    )
  ) {
    return StackViewTransitionConfigs.defaultTransitionConfig(
      transitionProps,
      prevTransitionProps,
      true
    );
  }
  return StackViewTransitionConfigs.defaultTransitionConfig(
    transitionProps,
    prevTransitionProps,
    false
  );
};

它使用 React Navigation V2 自己的转换。

Answer 1

回到文档

headerBackTitle: : 默认为上一个场景的headerTitle

在您的实现，你想摆脱ScreenA对ScreenB，其中的标题ScreenA为空，所以后退按钮不包含一个标题。

总会有一种情况（根据您的设计）从非标题屏幕过渡到标题屏幕，因此此解决方案将不起作用。

一种用于该解决方法是创建一个转变器与一个default（一画面转变）和modal转换（模态转换），并将其设置在transitionConfig所述选项StackNavigatorConfig如

let CustomTransitionConfig = () => {
    return {
        screenInterpolator: (sceneProps) => {
            const { position, scene } = sceneProps;
            const { index, route } = scene;
            const params = route.params || {};
            const transition = params.transition || 'default';
            return {
                modal: ModalTransition(index, position),
                default: ScreenTransition(index, position),
            }[transition];
        }
    }
};

createStackNavigator({
...
   {transitionConfig: CustomTransitionConfig}
...

并在导航时使用过渡参数，如果你想有一个模态作为

this.props.navigation.navigate({routeName: 'ScreenC', params: {transition: 'modal'}}