react-navigation 4.0 transitionConfig升级到5.0 cardStyleInterpolator？

Question

过渡动画，在4.0版本中可以使用，但在5.0版本中不能使用。

5.0版本的文档。https:/reactnavigation.orgdocsstack-navigator#cardstyleinterpolator。

doc4.0.xstack-navigator https:/reactnavigation.orgdocs4.xstack-navigator-1.0#stacknavigatorconfig。

请问我写错了什么？

在4.0版本中

const forHorizontalLeft = sceneProps => {
  const {layout, position, scene} = sceneProps;

  const index = scene.index;
  const inputRange = [index - 1, index, index + 1];

  const width = layout.initWidth;
  const outputRange = 1 ? [width, 0, -width * 0.3] : [-width, 0, width * -0.3];

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

  const translateY = 0;
  const translateX = position.interpolate({
    inputRange,
    outputRange,
  });

  return {
    opacity,
    transform: [{translateX}, {translateY}],
  };
};

在5.0版本中

screenOptions={{
          headerShown: false,
          cardStyleInterpolator: ({
            closing,
            current,
            index,
            insets,
            inverted,
            next,
            layouts,
            swiping,
            current: {progress},
          }) => {
            const _index = index;
            const width = layouts.screen.width;

            const inputRange = [_index - 1, _index, _index + 1];
            const outputRange = 1
              ? [width, 0, -width * 0.3]
              : [-width, 0, width * -0.3];

            const translateY = 0;
            const translateX = progress.interpolate({
              inputRange,
              outputRange,
            });

            const opacity = progress.interpolate({
              inputRange: [
                _index - 1,
                _index - 0.99,
                _index,
                _index + 0.99,
                _index + 1,
              ],
              outputRange: [0, 1, 1, 0.85, 0],
            });

            return {
              cardStyle: {
                transform: [{translateX}, {translateY}],
                opacity,
              },
              overlayStyle: {
                transform: [{translateX}, {translateY}],
                opacity,
              },
            };
          },

Answer 1

删除所有这些额外的 _index +.

按照文档中的例子，在 forFade 动画，并在那里改变风格来实现你的自定义动画，而不是粘贴与堆栈v1相同的代码。他们是完全不同的，相同的代码将无法工作。

对于水平动画，已经有一个内置的 TransitionPresets.SlideFromRightIOS 动画，你可以用它来代替重新实现的 https:/reactnavigation.orgdocsstack-navigator#transitionpresets。

有关动画的教程，请看 https:/callstack.comlogcustom-screen-transitions-in-react-navigation。