javascript - 是否可以使用 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,
};

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

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

Answer 1

如果您检查TransitionConfigs.js

  function getTransitionConfig(

  ...
  ...

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

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

在您的情况下，通过定义screenInterpolator，这将作为唯一的转换。如果你想定义很多，包括默认的，请引用my post here并用默认的扩展您的自定义。

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