Как у вас могут быть разные анимации перехода между экранами с реагирующей навигацией? - PullRequest
Новая
       55

Как у вас могут быть разные анимации перехода между экранами с реагирующей навигацией?

0 голосов
/ 08 ноября 2019

В настоящее время я работаю над приложением ReactNative, которое имеет 2 экрана. Цель состоит в том, чтобы анимировать экраны так, чтобы они толкали друг друга вверх или вниз в зависимости от того, с какого экрана вы переходите. GIF ниже - это переход, который я пытаюсь достичь.

Example of the transition I'm looking for

В настоящее время я использую createAnimatedSwitchNavigator для создания эффекта, проблемав том, что мой текущий переход только толкает экраны вверх. Есть ли способ определить, какой экран в данный момент включен в анимированном навигаторе-переключателе, чтобы я мог изменить направление перехода? 

const MySwitch = createAnimatedSwitchNavigator(
  {
    Home: {
        screen: Home
    },
    Page2: {
        screen: Page2
    },
  },
  {
    transition: (
        <Transition.Together>
            <Transition.Out
                type="slide-top"
                durationMs={400}
                interpolation="easeIn"
            />
            <Transition.In type="slide-bottom" durationMs={500} />
        </Transition.Together>
    )
  }
);

Пожалуйста, помогите мне с этим.

Спасибо

Ответы [ 2 ]

1 голос
/ 12 ноября 2019

Вот руководство для стека реакции-навигации 2.0 стека альфа / реакции-навигации 5

https://callstack.com/blog/custom-screen-transitions-in-react-navigation/

0 голосов
/ 14 ноября 2019

Провел некоторое исследование и смог заставить его работать со следующим кодом: 

const AppNavigator = createStackNavigator({
    Home: {
        screen: Home
    },
    Page2: {
        screen: Page2
    }
},
{
    initialRouteName: "Home",
    headerMode: "none",
    defaultNavigationOptions: {
        gesturesEnabled: false
    },
    transitionConfig: () => ({
        transitionSpec: {
          duration: 1400,
          easing: Easing.out(Easing.poly(4)),
          timing: Animated.timing,
        },
        screenInterpolator: sceneProps => {
          const { layout, position, scene } = sceneProps;
          const { index } = scene;

          const height = layout.initHeight;
          const translateY = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [height, 0, -height],
          });

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

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

Самым сложным было понимание интерполяции, поскольку кажется, что существует много, казалось бы, произвольных значений. Я не нашел документацию самой лучшей, однако смог придумать следующее понимание:

Взять, например, приведенный ниже код. Здесь в первую очередь задается тип перевода, который в данном случае равен translateY

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

Следующая запутанная часть - это диапазоны ввода и вывода, что означают эти числа? Ну, входной диапазон фактически соответствует выходному диапазону. Выглядит примерно так: 

inputRange: [newScreen, currentScreen, previousScreen]

В inputRange мы указываем, какие экраны мы хотим анимировать, затем в выходном диапазоне мы указываем, что мы хотим делать с этими экранами. Изменение outputRange[0] приведет к изменению нового экрана и т. Д.

Поскольку мы уже установили тип перевода на translateY, мы знаем, что экран перемещается вверх или вниз. 

outputRange: [height, 0, -height]

Этотеперь говорим новому экрану переместиться вверх в верхнюю часть экрана и старому экрану также переместиться вверх, за верхнюю часть экрана (отсюда -height, которая будет равна -100vh в CSS).

...