Блог

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

У меня есть заголовок компонента (Представление) и плоский список, когда я прокручиваю вниз, я хочу скрыть заголовок компонента. Заголовок компонента успешно переведен в Y, но плоский список не перемещается вверх, и пустая область остается на месте.

Вот код:

 const TestAnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const [animatedValue, setanimatedValue] = useState(new Animated.Value(0));

let translateY = animatedValue.interpolate({
    inputRange: [0, 230],
    outputRange: [0, -230],
    extrapolate: Extrapolate.CLAMP,
  });

<View style={{ flex: 1 }}>
  <Animated.View style={{
     transform: [{translateY}], 
     backgroundColor: 'lightblue', 
     height: 230}}>
   </Animated.View>
   <TestAnimatedFlatList
        data = {dataT}
        renderItem={renderItem}
        keyExtractor={ (item) => item }
        style = {{flex: 1}}
        onScroll={Animated.event(
          [{nativeEvent: {
              contentOffset: {
                  y: animatedValue
              }
          }
      }],
          {useNativeDriver: true}
      )}
 />
 

Ожидаемое поведение должно заключаться в том, что, когда заголовок компонента исчезнет, плоский список до самого верха заменит его и покроет весь экран.

Фактическое поведение:

Состояние 1
Состояние 2

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

Из — за сложности заголовка моего компонента не рекомендуется помещать его в качестве заголовка в плоский список. Вот почему я использую анимированный компонент. Возможно, весь подход неверен.

Я использую: React Native 0.63.53

Если цель состоит в том, чтобы скрыть заголовок в виде прокрутки, то вы должны отобразить свой заголовок в Flatlist опоре ListHeaderComponent , как показано ниже

   <FlatList
      ListHeaderComponent={() => (<View style={{ backgroundColor: 'lightblue', height: 230}}/>)}
      data = {dataT}
      renderItem={renderItem}
      keyExtractor={ (item) => item }
      style = {{flex: 1}}/>
 

Но если вы хотите анимировать, попробуйте выполнить код ниже:

 const offset = useRef(new Animated.Value(0)).current;
const [animatedValue, setanimatedValue] = useState(new Animated.Value(0));

let scale = offset.interpolate({
            inputRange: [0, 230],
    outputRange: [1, 0],
            extrapolate: "clamp"
          });


<View style={{ flex: 1 }}>
  <Animated.View style={{
     transform: [{scale}], 
     backgroundColor: 'lightblue', 
     height: 230}}>
   </Animated.View>
   <Animated.FlatList
        data = {dataT}
        renderItem={renderItem}
        keyExtractor={ (item) => item }
        style = {{flex: 1}}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: offset } } }],
          { useNativeDriver: true }
        )}
 />
</View>