xHeaderBackButton 返回但从屏幕 3 转换到屏幕 2 然后转到 1

Question

我是初学者，我想知道如何从屏幕 3 转到屏幕 1，而不是使用我的自定义过渡从屏幕 3 到 2，然后 1 全部过渡。我希望它从屏幕 3 转到屏幕 1：这是我在屏幕 3 上使用的按钮。我覆盖了 goBack()，因为我希望它直接转到屏幕 1。但它不起作用。如何解决？

    <HeaderBackButton
          onPress={() => {
            navigation.navigate("Profile");
          }}
        />

希望有人能给我一个答案，能给我不同的选择。我是初学者，所以请向我解释一下基础知识。

感谢您的宝贵时间

编辑 10 月 17 日！

const screensChosenConfig = {
  duration: 0
};

const standardScreensConfig = {
  duration: 1000,
  easing: Easing.out(Easing.poly(4)),
  timing: Animated.timing,
  useNativeDriver: true
};

 transitionConfig: sceneProps => ({
      transitionSpec:
        sceneProps.scene.route.routeName === "Account" ||
        sceneProps.scene.route.routeName === "ChangePassword"
          ? screensChosenConfig
          : standardScreensConfig,
      screenInterpolator: sceneProps => {
        const { position, layout, scene } = sceneProps;

        const thisSceneIndex = scene.index;
        const width = layout.initWidth;

        const translateX = position.interpolate({
          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
          outputRange: [width, 0, 0]
        });

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

        const translateWithOpacity = {
          opacity,
          transform: [{ translateX }]
        };

        return translateWithOpacity;
      }
    })

Answer 1

我做了一些测试，但无法实现无痛解决方案。

第一个解决方案仅在您导航到的屏幕是 stackNavigator 的 initalRouteName 时才有效。如果在任何其他屏幕上使用，它将禁用该屏幕的淡入动画。

简单地说，将您正在导航的屏幕添加回您提供的屏幕 screensChosenConfig:

sceneProps.scene.route.routeName === "Account" ||
sceneProps.scene.route.routeName === "ChangePassword"||
sceneProps.scene.route.routeName ==="ProfileScreen"
    ? screensChosenConfig
    : standardScreensConfig

这是它的行为方式：

ProfileScreen出现时没有动画。

SecondScreen 中的动画。

ThirdScreen 中的动画。

在您调用的聚焦屏幕内 navigate("ProfileScreen")

ProfileScreen出现时没有其他屏幕的淡出动画。

编辑。

如果您需要导航回另一个屏幕，那不是 initialRouteName，我测试的解决方案是在堆栈的每个屏幕内添加此 componentDidMount:

componentDidMount = () => {
    this.props.navigation.setParams({ animatedIn: true })
}

有了这个，我可以简单地在 transitionSpec:

中检查它

transitionSpec:
  sceneProps.scene.route.routeName === "Account" ||
  sceneProps.scene.route.routeName === "ChangePassword"||
  (sceneProps.scene.route.params&&sceneProps.scene.route.params.animatedIn)
    ? screensChosenConfig
    : standardScreensConfig,

请注意，这将禁用简单的 goBack() 到 header 的动画

xHeaderBackButton 返回但从屏幕 3 转换到屏幕 2 然后转到 1

xHeaderBackButton goes back but transitions from screen 3 to screen 2 and then goes to 1

react-native

screen