Question

我需要创建一个自定义动画效果，它与iOS上的默认动画效果非常相似，但有一点不同：当我更换屏幕时，我需要下一个屏幕将当前屏幕推到左边。默认动画是将下一个屏幕放在当前屏幕上，并且还将当前屏幕向左移动。但是我需要下一个屏幕来真正推动当前屏幕，因为我有一个从第一个屏幕开始并继续到第二个屏幕的波浪，我想在更换屏幕时实现延续效果。

这就是我现在所拥有的，但它只是在屏幕更改时隐藏当前屏幕：

<div id="progressbar">
  <div class="active" id="Details"><strong>Details&BioData</strong></div>
  <div id="Educational"><strong>Educational Qualification</strong></div>
  <div id="Attachement"><strong>Attachement Of Forms</strong></div>
  <div id="Training Details"><strong>Training Details</strong></div>
  <div id="Confirmation"><strong>Confirmation</strong></div>
</div>

感谢您的帮助！

Answer 1

我刚刚遇到这个问题，我想我在 react navigation 官方网站上找到了解决方案。

const cardStyleInterpolator = ({
  current,
  next,
  inverted,
  layouts: { screen }
}) => {
  const progress = Animated.add(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: "clamp"
    }),
    next
      ? next.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
          extrapolate: "clamp"
        })
      : 0
  );

  return {
    cardStyle: {
      transform: [
        {
          translateX: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [
                screen.width, // Focused, but offscreen in the beginning
                0, // Fully focused
                //I changed this line only
                //screen.width * -0.3 // Fully unfocused
                -screen.width
              ],
              extrapolate: "clamp"
            }),
            inverted
          )
        }
      ]
    }
  };
};

https://reactnavigation.org/docs/stack-navigator

用法：

<Stack.Navigator
  screenOptions={{
    headerShown: false, //Optional
    cardStyle: { backgroundColor: "transparent" }, //Optional
    cardStyleInterpolator
  }}
>
  <Stack.Screen name="ScreenA" component={ScreenA} />
  <Stack.Screen name="ScreenB" component={ScreenB} />
</Stack.Navigator>

React Native Stack 导航的自定义动画

1 个答案: