Как анимировать заголовок, чтобы показать на основе прокрутки в реагировать родной?

Question

Так что в идеале, когда я прокручиваю вниз, я хочу, чтобы заголовок исчезал (скользил вниз), а когда я прокручивал вверх, я хотел, чтобы он отображался (скользил вверх). Idc, где я на странице. Я просто хочу, чтобы анимация запускалась, когда эти 2 события происходят. Я вижу, что некоторые приложения имеют это, но я не могу придумать, как его воспроизвести. пожалуйста, помогите мне установить основу для этого

Answer 1

Вы можете использовать Animated.FlatList или Animated.ScrollView, чтобы создать вид прокрутки, и прикрепить обратный вызов для прослушивания события onScroll, когда оно изменяется. Затем, используя интерполяцию для отображения значения между осью Y и непрозрачностью.

searchBarOpacityAnim - это состояние компонента. Используя Animated.event, состояние будет обновляться при вызове обратного вызова. Кроме того, не забудьте установить useNativeDriver на true. Я приложил ссылку к документу ниже о том, почему вы должны его установить.

<Animated.FlatList
  ...
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: searchBarOpacityAnim } } }],
    { useNativeDriver: true },
  )}
  ...
/>

Затем используйте Animated.View, чтобы обернуть ваш компонент, который вы хотите анимировать. Используйте .interpolate, чтобы отобразить значение между состоянием и непрозрачностью компонента, как в примере ниже ...

<Animated.View
  style={{
    opacity: searchBarOpacityAnim.interpolate({
      inputRange: [213, 215],
      outputRange: [0, 1],
    }),
  }}
>
  <SearchBar />
</Animated.View>

Подробнее о useNativeDriver, .interpolate и Animated.event можно прочитать здесь.

https://facebook.github.io/react-native/docs/animated#using-the-native-driver

https://facebook.github.io/react-native/docs/animations#interpolation

https://facebook.github.io/react-native/docs/animated#handling-gestures-and-other-events

Answer 2

Вы можете использовать Animated от 'Reaction-native'

. Вот пример изменения высоты верхней панели:

import { Animated } from 'react-native';

определение верхней панели maxHeight и minHeight

const HEADER_MAX_HEIGHT = 120;
const HEADER_MIN_HEIGHT = 48;

инициализируйте переменную значением scrollY

constructor(props) {
   super(props);

   this.state = {
       scrollY: new Animated.Value(
          Platform.OS === 'ios' ? -HEADER_MAX_HEIGHT : 0,
       ),
   };
}

при рендеринге, вы можете интерполировать значение в соответствии со значением scrollY

render() {
   const { scrollY } = this.state;

   // this will set a height for topbar
   const headerHeight = scrollY.interpolate({
      inputRange: [0, HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT],
      outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
      extrapolate: 'clamp',
   });

   // obs: the inputRange is the scrollY value, (starts on 0) 
   //  and can go until (HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT)
   //  outputRange is the height that will set on topbar

   // obs: you must add a onScroll function on a scrollView like below:

   return (
       <View>
          <Animated.View style={{
             position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
             backgroundColor: '#2e4265',
             height: headerHeight,
             zIndex: 1,
             flexDirection: 'row',
             justifyContent: 'flex-start',
           }}>
             <Text>{title}</Text>
         </Animated.View>
         <ScrollView
            style={{ flex: 1 }}
            scrollEventThrottle={16}
            onScroll={Animated.event(
               [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
          )}>
            <View style={{ height: 1000 }} />
         </ScrollView>
       </View>
   );
}