Блог

Главная - Вопросы по программированию - Как скрыть/отобразить липкий заголовок при прокрутке react-native

Как скрыть/отобразить липкий заголовок при прокрутке react-native

#react-native #animation #react-native-animatable

Вопрос:

Я реализовал это, используя анимированную библиотеку в родном react-native языке, где я интерполирую при прокрутке. Проблема в том, что он очень отстает на ios и несколько отстает на Android. Есть ли библиотека или лучший способ скрыть этот заголовок при прокрутке в react-native ?

Вот моя текущая реализация:

 const scrollY = new Animated.Value(0);
  const diffClamp = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);
  const translateY = diffClamp.interpolate({
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [0, -HEADER_HEIGHT],
  });

return (

    <ExploreHeader
          ...          
         translateY={translateY}
    />
    
     <ExploreData
           ...
            scrollY={scrollY}
            offset={HEADER_HEIGHT}
            scrollRef={scrollRef}
          />

и в ExploreHeader у меня есть это:

 <Animated.View
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        height: height,
        transform: [{translateY: translateY}],
        elevation: 100,
        zIndex: 100,
      }}>

и в разведанных данных:

        <FlatList
          ...
          onScroll={(e) => {
            scrollY.setValue(e.nativeEvent.contentOffset.y);
          }}
          style={{paddingTop: offset}}
        />

Комментарии:

1. в симуляторе ios вы заметили, что медленная анимация отключена (меню отладки медленная анимация) на Android анимация всегда работает медленно в режиме отладки вы должны запускать анимацию в режиме выпуска, чтобы получить правильное ощущение

2. привет @AdamKatz. У меня есть настоящее приложение для ios и приложения для Android, которые находятся в магазинах, и они все еще работают медленно

3. спасибо за обратную связь, убивает мое предложение насмерть.

Метки: