是否可以使用 React 导航在 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,
};

正如您所观察到的，我检查我是否已将过渡作为路由参数传递。如果未传递，我将传递一个返回空对象的默认函数。

如果我不传递转换配置，是否可以切换回 StackNavigator 的默认转换？

Answer 1

如果你检查TransitionConfigs.js

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

您可以看到，当您定义自定义过渡配置器时，它将覆盖用于定义过渡transitionSpec and screenInterpolator props。

在您的情况下，通过定义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 );
  },
} );