在react-navigation transitionConfig中使用非本地动画模块

时间:2018-08-12 20:28:41

标签: react-native react-navigation

如theie文档here中所述,我们可以使用不透明度和翻译道具来创建自定义过渡。但是,我有一个非本地动画模块的要求:borderRadius,即边界Radius在过渡时会从某个值变为0。

我收到“ borderRadius”不是本机动画模块的错误。我想在不涉及本机驱动程序的情况下使用此非本机动画模块。有什么方法可以为非本机模块启用转换screenInterpolation吗?

transitionConfig: () => ({
  transitionSpec: {
      duration: 300,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
  },
  screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      console.log("layout",layout);

      const height = layout.initHeight;
      const translateY = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [height, 0, 0],
      });

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

      const borderRadius = layout.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [Values.ScreenWidth/2, 0, 0],
      });

      return { opacity, transform: [{ translateY }], borderRadius };
  },
}),

环境

react-navigation: 2.6.2
react-native: 0.53.3
node: 10.7.0
yarn: 1.7.0

0 个答案:

没有答案