React Navigation:动态设置`mode`设置(/标题呈现双倍和后退按钮消失) [英] React Navigation: Dynamically setting `mode` setting (/ header renders double and back button disappears)

问题描述

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

In my app I have three screens: ScreenA, ScreenB and ScreenC. They all should have a header and they should all have a back button with the name of the previous screen. I wanted ScreenA to be able to open ScreenB using the modal animation:

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

和ScreenA 也应该能够使用默认的从右到左的滑动动画打开ScreenC.问题是，StackNavigator 已经配置了模态模式.有没有办法动态设置模式?那么从 ScreenA 到 ScreenB 模态被使用，从 ScreenA 到 ScreenC 卡?

And ScreenA should also be able to open ScreenC using the default sliding animation from right to left. The problem was, that the StackNavigator was already configured with the modal mode. Is there a way to dynamically set the mode? So that from ScreenA to ScreenB modal is used and from ScreenA to ScreenC card?

此外在这种情况下如何处理标题?(关于我问这个问题的原因，请进一步阅读.)

Furthermore how to handle the header in this case? (For the reason why I ask this question, please read further.)

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

Here is what I tried after reading the documentation. It describes a similar scenario.

以下是本教程为我翻译的方式:

Here is how this tutorial translated for me:

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

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

这个解决方案的问题是，当我在 ScreenA 上时，标题现在呈现双倍.此外，当我打开模态 ScreenB 后退按钮是空白的.

The problem with this solution is, that the header now renders double when I'm on ScreenA. Furthermore when I open the modal ScreenB the back button is blank.

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

In my attempt to solve this problem following the documentation, I found a solution for the double header rendering:

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;
    }
  }
);

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

The problem with this solution is, that the back buttons still do not have any text.

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

Following what I've learned from Pritish, here is the code I ended up with:

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 自己的转换.

It uses React Navigation V2's owns transitions.

推荐答案

回到 文档

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

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

In your implementation, you're trying to move from ScreenA to ScreenB, where the header of the ScreenA is null, therefore the back button doesn't contain a title.

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

There will always be a case (as per your design) that you transition from a non header screen to a header screen, hence this solution won't work.

一种解决方法是创建一个 Transitioner 和 default(一个屏幕过渡)和 modal Transition(一个模态过渡)，并在 transitionConfig 选项 StackNavigatorConfig 为

A workaround for that would be to create a Transitioner with a default(a screen transition) and modal Transition (a modal transition), and set it in the transitionConfig options of the StackNavigatorConfig as

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}
...

并在导航时使用过渡参数，如果您想将模态设为

and use transition params while navigating if you want to have a modal as

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

这篇关于React Navigation:动态设置`mode`设置(/标题呈现双倍和后退按钮消失)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！