Question

有什么方法可以在react native中更改默认导航动画。在IOS中，从右向左滑动。 android自下而上。我们可以在两个平台上都做到这一点吗？非常感谢

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的对象。您可以在screenSpec中的transitionSpec和布局转换中配置动画时间属性，例如持续时间和缓动。这是一个示例：

    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），并使用返回值来配置其过渡。

如果导航（场景）具有参数{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 }
    ]
  };
};

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

1 个答案: