xHeaderBackButton возвращается, но переходит с экрана 3 на экран 2, а затем переходит к 1 - PullRequest
Новая
       12

xHeaderBackButton возвращается, но переходит с экрана 3 на экран 2, а затем переходит к 1

0 голосов
/ 15 октября 2019

Я новичок, и мне было интересно, как я могу перейти с экрана 3 на экран 1, вместо этого он идет с моими собственными переходами с экрана 3 на 2, а затем 1 все в переходе. Я хочу, чтобы он перешел с экрана 3 на экран 1: это кнопка, которую я использую на экране 3. Я перезаписал goBack (), потому что я хотел, чтобы он перешел прямо на экран 1. Но это не работает. Как это можно исправить? 

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

Я надеюсь, что кто-то может дать мне ответ и может дать мне различные варианты. Я новичок, поэтому, пожалуйста, объясните мне это просто.

Спасибо за ваше время

Редактировать 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;
      }
    })

1 Ответ

1 голос
/ 17 октября 2019

Я провел небольшое тестирование, но не смог найти безболезненного решения.

Это первое решение работает только в том случае, если экран, к которому вы переходите, является initalRouteName в stackNavigator. Если он используется на любом другом экране, он отключит эффект постепенного появления на этом экране.

Просто добавьте экран, к которому вы переходите, обратно к тому, который вы предоставляете screensChosenConfig: 

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

Вот как это происходит:

ProfileScreen появляется без анимации.

Анимация SecondScreen в.

Анимация ThirdScreen в.

Внутри сфокусированного экрана, который вы вызываете, navigate("ProfileScreen")

ProfileScreen появляется без анимации затухания других экранов.

EDIT.

Если вам нужночтобы вернуться к другому экрану, это НЕ 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 () через заголовок

...