Название анимации при переходе экрана в пользовательском компоненте заголовка? - PullRequest
Новая
       13

Название анимации при переходе экрана в пользовательском компоненте заголовка?

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

У меня есть собственный компонент Header, в котором есть поле поиска и некоторые другие функции, уникальные для моего приложения. Я просто определяю его на navigationOptions для каждого экрана. 

SomeScreen.navigationOptions = (props) => ({
  header: <Header {... props} />,
});

Что я хочу сделать, хотя анимировать заголовок внутри самого компонента при его перемещении с экрана на экран? В общем, как я могу сделать это с помощью пользовательского заголовка? Я посмотрел на react-navigation-stacks реализацию Header, но не могу в этом разобраться.

1 Ответ

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

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

SomeScreen.navigationOptions = {
  header: props => <Header {...props} />
};

Если вы находитесь на react-navigation-stack@2.x (альфа), вы получите реквизит с именемscene. Это объект, содержащий свойство progress, которое имеет 3 свойства, которые являются реанимированными узлами.

  • current: представляет ход экрана, в котором заголовок находится в диапазоне отОт 0 до 1, где 0 означает, что экран полностью скрыт, а 1 означает, что экран полностью показан.
  • next: аналогично текущему, но для следующего экрана в стеке. может быть undefined при отсутствии следующего экрана
  • previous: аналогично текущему, но для предыдущего экрана в стеке. может быть undefined при отсутствии предыдущего экрана

Вы можете интерполировать эти значения для анимации вашего вида. Например, предположим, что вы хотите анимировать непрозрачность, начиная с 0,5 и до 1, когда появляется экран: 

import Animated from "react-native-reanimated";

// ...

<Animated.Text
  style={{
    opacity: Animated.interpolate(scene.progress.current, {
      inputRange: [0, 1],
      outputRange: [0.5, 1]
    })
  }}
/>;

Если вы используете react-navigation-stack@1.x, вы получаете реквизит с именем position. Это анимированный узел, который представляет текущую позицию стека (в диапазоне от 0 до текущего индекса). Вы можете интерполировать на нем, чтобы оживить ваш заголовок. Это может быть немного сложно, поэтому вам придется поиграться.

Например, скажем, вы хотите анимировать непрозрачность, начиная с 0,5 и до 1, когда появляется экран:

ПРИМЕЧАНИЕ. Я не проверял этот код, поэтому код может быть неправильным. Так что вам придется поиграть с этим. 

import { Animated } from "react-native";

// ...

<Animated.Text
  style={{
    opacity: position.interpolate({
      inputRange: [index - 1, index],
      outputRange: [0.5, 1]
    })
  }}
/>;
...