Как мне запустить анимацию `spring` с реактивно-родным-реанимированным декларативным способом? - PullRequest
1 голос
/ 16 января 2020

У меня есть простой Animated.View, который я перемещаю на основе пальца пользователя, мой компонент выглядит следующим образом:

return (
      <View
        style={styles.container}
      >
        <PanGestureHandler
          ref={this.panRef}
          onGestureEvent={this.handlePan}
          onHandlerStateChange={this.handlePan}
        >
          <Animated.View
            style={[
              styles.parent,
              {
                transform: [
                  { translateX: this.X },
                ],
              },
            ]}
          >
            <MyAwesomeComponent />
          </Animated.View>
        </PanGestureHandler>
      </View>

Проблема в том, что я хочу создать декларативный метод с именем scrollToPosition(position, animated)

Теперь это выглядит так:

scrollToPosition = (position, animated = false) => {
    if (animated) {
      // TODO: What to do now?
    } else {
      this.X.setValue(position);
    }
  }

, это работает без анимации, но моя цель сейчас - добавить способ анимировать значение с помощью Ease.

Если бы мы были в живом мире анимации, мы бы сделали что-то вроде этого:

Animated.spring(this.X, {
    toValue: position,
}).start();

но как мне сделать то же самое с react-native-reanimated. Пожалуйста, не тратьте время на объяснение UI vs JS realm, я знаю об этом, и я хочу воспользоваться анимацией в потоке UI, я просто не знаю, как декларативно запускать эту анимацию после пользователь т.е. нажимает кнопку.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...