Как решить проблему анимации React Native Scroll во время медленной прокрутки?

Question

Я сделал пример кода здесь с Snack expo Анимированный заголовок

Проблема, с которой я столкнулся, заключается в том, что моя анимация недостаточно плавная. Похоже, это дрожит.

Демонстрационное видео YouTube Video

Я не могу найти, в чем здесь проблема, а также попытался возиться с scrollEventThrottle, alwaysBounceVertical , bouncesZoom реквизиты в ScrollView.

Answer 1

Я выясняю, в чем проблема, и проблема не в производительности.

Проблема в стилизации заголовка. Добавление позиции к абсолюту решит эту проблему.

Но есть еще одна проблема, которая возникает, когда позиция в качестве абсолютной, компонент внутри заголовка, такой как TextInput, не будет появляться при возникновении события касания.

Чтобы решить эту новую проблему, вы должны добавить zIndex. Еще учебник о zIndex

Исправлен анимированный заголовок

Answer 2

Попробуйте добавить useNativeDriver:

onScroll={
    Animated.event([
        {
         nativeEvent: {
            contentOffset: {
                y: scrollY,
           },
         },
      },
    ], 
    { useNativeDriver: true })
}

Но я думаю, что в React Native, ScrollView не должен работать с очень длинным дублированным контентом. Я предлагаю вам использовать flatlist для вашего случая использования.