Добавить слушателя к Diff Clamp, React Native - PullRequest
Новая
       60

Добавить слушателя к Diff Clamp, React Native

2 голосов
/ 23 апреля 2020

Попытка добавить слушателя к Animated Diff Clamp в реагирующем нативе, чтобы разрешить изменение пары неанимированных свойств.

Первоначально он работает правильно, но выдает ошибку "недопустимый узел", когда Экран прокручивается за пределы своего свойства max.

"Недопустимый идентификатор узла, установленный как вход для Animated.DiffClamp"

Большинство статей по этому вопросу устарели на несколько лет и предлагают что вы не можете добавить слушателя к зажиму diff. Тем не менее, он работает (сейчас?), Но только если объявлен в конструкторе.

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

Render () {

    const yHeader = Animated.diffClamp(
        this.props._yScroll.interpolate({
            inputRange: [0, 48],
            outputRange: [0, -48],
            extrapolateLeft: 'clamp',
        }),
        -48, 0)

    yHeader.addListener(
        Animated.event([{value: this.value.ySearch}], {useNativeDriver: false})
    )

    // this.value.search has been declared in the constructor as an Animated value and is waiting to receive the props. This is not the problem!
}

Если при возникновении ошибки все еще выполняется прокрутка, вы можете видеть, что она продолжает работать правильно, если вывести свое текущее значение в console.log, несмотря на «недопустимую» ошибку, полностью блокирующую экран.

  • Можно ли добавить слушателя к зажиму Diff?
  • Если нет, то почему он работает, если DiffClamp находится в конструкторе?
  • Есть ли обходной путь, если предположить первый вопрос - нет, и я что-то не забил?

1 Ответ

0 голосов
/ 24 апреля 2020

Это решает проблему, но выглядит как крайне ненужный обходной путь.

  1. Похоже, мы не можем добавить слушателя "легально" к анимированному зажиму различий, когда этот зажим различий объявлен в Render. (Даже если мы видим, что это работает в журнале консоли, мы получаем ошибку, покрывающую экран)

  2. Решение состоит в том, чтобы взять значение Diff Clamp и интерполировать его в новую переменную.

// 

const yHeader = Animated.diffClamp(
    this.props._yScroll.interpolate({
        inputRange: [0, 48],
        outputRange: [0, -48],
        extrapolateLeft: 'clamp',
    }),
-48, 0)

const yHeader_legalised = yHeader.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
})

 yHeader_legalised.addListener(
     Animated.event([{value: this.value.ySearch}], {useNativeDriver: false})
 )

PS. Вам придется потерять yHeader_legalised в контексте при рендеринге вместо yHeader, чтобы слушатель мог что-то слушать.

...