Блог

Я пытаюсь заставить свой вид прокрутки прокручиваться над красным полем. Чтобы добиться этого, я анимировал translateY значение контейнера коробки. Значение привязано к onScroll событию, и оно работает очень близко к ожидаемому, за исключением того, что поле выдает странное и едва заметное мерцание во время прокрутки. Я попытался увеличить/уменьшить порог прокрутки, чтобы добиться более частого вызова onScroll . Это не сработало.

     <ScrollView
      ref={(scroll) => (scrollRef.current = scroll)}
      style={{ backgroundColor: '#FF7020' }}
      scrollEnabled={state.collapsed}
      scrollEventThrottle={1}
      onScroll={Animated.event(
        [
          {
            nativeEvent: { contentOffset: { y: translateYAnim } },
          },
        ],
        {
          useNativeDriver: false,
        }
      )}
      bounces={false}
    >
      <AnimatedView
        style={{
          height: heightAnim,
          transform: [
            {
              translateY: translateYAnim,
            },
          ],
          padding: 30,
        }}
      >
        <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
      </AnimatedView>
      <View
        style={{
          backgroundColor: '#fff',
          borderTopRightRadius: 40,
          borderTopLeftRadius: 40,
        }}
      >
        {Array.from({ length: 400 }).map(() => (
          <View style={{ height: 50, width: 50 }} />
        ))}
      </View>
    </ScrollView>
 

Мерцание происходит вот так:
https://i.stack.imgur.com/CBWpZ.gif