是否可以使用 React Navigation 在 React Native 中的自定义和默认转换之间切换？

Question

下面是我创建的转换配置，以便我可以从任何屏幕传递自定义转换：

const TransitionConfiguration = () => ( {
        // Define scene interpolation, eq. custom transition
  screenInterpolator: ( sceneProps ) => {
    const { position, scene } = sceneProps;
    const { index, route } = scene;
    const params = route.params || {};
    const defaultTransition = () => ( {} );
    const transition = params.transition || defaultTransition;

    return transition( index, position );
  },
} );

const navigationOptions = {
  navigationOptions: {
    headerStyle: {
      backgroundColor: background.color4,
      shadowColor: primary.color2,
    },
    headerTitleStyle: { color: primary.color1 },
  },
  transitionConfig: TransitionConfiguration,
};

如您所见，我检查是否已将转换作为路由参数传递。如果没有通过，我将传递一个默认函数，该函数 returns 一个空对象。

如果我没有通过转换配置，是否可以切换回 StackNavigator 的默认转换？

Answer 1

如果勾选TransitionConfigs.js

  function getTransitionConfig(

  ...
  ...

  if (transitionConfigurer) {
    return {
      ...defaultConfig,
      ...transitionConfigurer(),
    };
  }
  return defaultConfig;

您可以看到，当您定义自定义转换配置器时，它将覆盖用于定义转换的 transitionSpec and screenInterpolator 道具。

在您的情况下，通过定义 screenInterpolator，这是唯一的过渡。如果你想定义很多，包括默认的，请参考并用默认的扩展你的自定义。

意思是，您的 screenInterpolator 应该检查是否定义了 params.transition，如果没有返回到默认值之一。

Answer 2

所以，在深入研究 react-navigation 的代码后，我发现有一个名为 CardStackStyleInterpolator 的文件提供了执行默认转换的功能。

我刚刚使用了从该文件导出的函数 forHorizontal。我没有为所有情况或设备处理它，但我认为它可以很容易地处理。此外，您不必为默认情况重复代码。

下面是片段：

import DefaultTransition from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

const TransitionConfiguration = () => ( {
        // Define scene interpolation, eq. custom transition
  screenInterpolator: ( sceneProps ) => {
    const { position, scene, layout } = sceneProps;
    const { index, route } = scene;
    const params = route.params || {};
    const transition = params.transition;

    return transition && typeof transition === 'function'
            ? transition( index, position, layout )
            : DefaultTransition.forHorizontal( sceneProps );
  },
} );

是否可以使用 React Navigation 在 React Native 中的自定义和默认转换之间切换？

Is it possible to switch between custom and default transition in React Native using React Navigation?

javascript

ecmascript-6

reactjs

react-native

react-navigation