我正在使用react-native-paper库添加一个浮动操作按钮（FAB），它可以根据用户的滚动方向改变宽度。
它应该做什么-如果用户向上滚动，立即展开FAB，向下滚动时收缩。
发生了什么-它给了我想要的结果，但由于某种原因，它需要3 - 4秒的效果发生。
密码-

import React from "react";
import { SafeAreaView, ScrollView } from "react-native";
import { AnimatedFAB } from "react-native-paper";
import Carousel from "../../components/carousel";
import Slider from "../../components/slider";

const HomePage = () => {
  const [isExtended, setIsExtended] = React.useState(true);
  function onScroll({ nativeEvent }: any) {
    const currentScrollPosition =
      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
    setIsExtended(currentScrollPosition <= 0);
  }
  const categories = [
    "Fruits",
    "Cars",
    "Places",
    "Brands",
    "Colors",
    "Shapes",
    "Sizes",
    "Names",
  ];

  return (
    <SafeAreaView>
      <ScrollView onScroll={onScroll}>
        <Carousel />
        {categories.map((item, index) => (
          <Slider key={index} title={item} />
        ))}
      </ScrollView>
      <AnimatedFAB
        style={{
          position: "absolute",
          bottom: 20,
          right: 20,
        }}
        icon="filter-variant"
        label="Filter"
        animateFrom="right"
        extended={isExtended}
        onPress={() => console.log("Pressed")}
      />
    </SafeAreaView>
  );
};

export default HomePage;

下面是Sliders/Carousel的外观[它们共享相似的代码]

import React from "react";
import { FlatList, StyleSheet, View, SafeAreaView } from "react-native";
import { Text } from "react-native-paper";
import data from "../../../data";
import Card from "../card";

const Slider = ({ title }: any) => {
  const renderItem = ({ item }: any) => <Card item={item} />;
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text style={styles.itemTitle}>{title}</Text>
        <FlatList
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          horizontal
          data={data}
          renderItem={renderItem}
          keyExtractor={(_, index) => index.toString()}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 20,
  },
  itemTitle: {
    color: "#fff",
    marginBottom: 20,
    fontSize: 20,
    fontWeight: "500",
  },
  title: {
    fontSize: 32,
  },
});

export default Slider;

我试过的解决办法-
我尝试使用useEffect钩子，但没有注意到显著的变化。我尝试使用Flatlist组件，但问题仍然存在。