react-native - react 导航 : Dynamically setting `mode` setting (/header renders double and back button disappears)

Question

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

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

并且ScreenA应该也可以使用默认的从右向左滑动动画打开ScreenC。问题是，StackNavigator 已经配置了模态模式。有没有办法动态设置模式？那么从ScreenA到ScreenB模态是用从ScreenA到ScreenC卡吗？

此外，在这种情况下如何处理 header ？ (至于我问这个问题的原因，请进一步阅读。)

这是我在阅读文档后尝试的。 It describes a similar scenario.

以下是本教程为我翻译的内容:

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

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

此解决方案的问题是，当我在 ScreenA 上时， header 现在呈现双倍。此外，当我打开模式 ScreenB 时，后退按钮是空白的。

编辑

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

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

回到docs

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

在您的实现中，您尝试从 ScreenA 移动到 ScreenB，其中 ScreenA 的 header 为空，因此后退按钮不包含标题。

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

解决方法是创建一个 Transitioner使用 default(屏幕转换)和 modal Transition(模态转换)，并将其设置在 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'}}