如何在 React Native 中更改默认导航动画

Question

有什么方法可以改变 react native 中的默认导航动画。在IOS中它从右向左滑动。安卓自下而上。我们可以为这两个平台制作这个概念吗？ 非常感谢

Answer 1

您可以为屏幕设置不同的模式，其中之一是modal：

const MainStackNavigator = createStackNavigator(
  {
    SplashScreen: { screen: SplashScreen },
    OnBoardingScreen: { screen: OnBoarding },
    LoginScreen: { screen: LoginContainer },
  },
  {
    navigationOptions: {
      header: null
    },
    mode: "modal",
    cardStyle: { backgroundColor: "transparent" },
   transitionConfig: TransitionConfiguration,

  }
);

你也可以使用transitionConfig，它返回一个带有两个参数transitionSpec和screenInterpolator的对象。您可以在 transitionSpec 中配置动画计时属性，如持续时间和缓动，在 screenInterpolator 中配置布局转换。 这是一个例子：

    const TransitionConfiguration = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: (sceneProps) => {
      const { layout, position, scene } = sceneProps;
      const width = layout.initWidth;
      const { index, route } = scene
      const params = route.params || {}; // <- That's new
      const transition = params.transition || 'default'; // <- That's new
      return {
        collapseExpand: CollapseExpand(index, position),
        default: SlideFromRight(index, position, width),
      }[transition];
    },
  }
}

默认情况下，新屏幕从右侧滑动。

let SlideFromRight = (index, position, width) => {
  const inputRange = [index - 1, index, index + 1];
  const translateX = position.interpolate({
    inputRange: [index - 1, index, index + 1],
    outputRange: [width, 0, 0]
  })
  const slideFromRight = { transform: [{ translateX }] }
  return slideFromRight
};

transitionSpec 没有什么特别之处。事实上，它看起来很像一个标准的 React Native Animated 示例。我们设置了过渡的持续时间和缓动配置文件，将其配置为基于时间的动画而不是弹簧，并使用本机驱动程序来提高性能。

screenInterpolator 是魔法发生的地方。 screenInterpolator 是一个 React Navigation 调用的函数，它带有一个我们称之为 sceneProps 的参数。 screenInterpolator(sceneProps) 为堆栈中的每个屏幕调用，返回值用于配置其转换。

如果 navigation(scene) 有一个参数 { transition : 'collapseExpand' } 屏幕插值器采取的 CollapseExpand 动画。

let CollapseExpand = (index, position) => {
  const inputRange = [index - 1, index, index + 1];
  const opacity = position.interpolate({
    inputRange,
    outputRange: [0, 1, 1],
  });

  const scaleY = position.interpolate({
    inputRange,
    outputRange: ([0, 1, 1]),
  });

  return {
    opacity,
    transform: [
      { scaleY }
    ]
  };
};