react-navigation 4.0 transitionConfig 升级到 5.0 cardStyleInterpolator？答案

【问题标题】：react-navigation 4.0 transitionConfig upgrade to 5.0 cardStyleInterpolator?react-navigation 4.0 transitionConfig 升级到 5.0 cardStyleInterpolator？
【发布时间】：2020-05-22 03:21:43
【问题描述】：

转场动画，4.0版本可以用，5.0版本不行

文档 5.0：https://reactnavigation.org/docs/stack-navigator/#cardstyleinterpolator

文档 4.0：https://reactnavigation.org/docs/4.x/stack-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,
              },
            };
          },

【问题讨论】：

标签： android react-native react-navigation

【解决方案1】：

删除所有多余的_index +。

按照forFade 动画文档中的示例并更改样式以实现您的自定义动画，而不是粘贴与堆栈 v1 相同的代码。它们是完全不同的，相同的代码是行不通的。

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

有关动画的教程，请参阅https://callstack.com/blog/custom-screen-transitions-in-react-navigation/

【讨论】：