ReactNative监听ScrollView滚动事件小事

监听ScrollView滚动距离进行操作是很常见的事,例如根据滚动距离显示或者隐藏NavigationBar,一般都是用ScrollView.onScroll回调函数获取。

ScrollView.onScroll是ScrollView组件的一个回调函数,用于在滚动视图滚动时触发相应的操作。它会在滚动过程中不断地被调用,因此如果在回调函数中执行了大量的计算或操作,可能会影响性能。为了优化ScrollView.onScroll的性能,可以考虑减少回调函数中的计算量,或者使用throttle或debounce等技术来限制回调函数的触发频率。

如果在滚动视图滚动时需要执行一些复杂的动画或交互效果,那么使用Animated.event可能会更加合适,因为它提供了更强大的动画控制能力。但如果只是需要在滚动视图滚动时执行一些简单的操作,那么使用ScrollView.onScroll可能会更加方便和高效。

<Animated.ScrollView

        style={{ flex: 1 }}

        scrollEventThrottle={16}

        showsVerticalScrollIndicator={false}

        onScroll={Animated.event(

          [{ nativeEvent: { contentOffset: { y: scrollY } } }],

          { useNativeDriver: true }

        )}

      >

PS: 注意Android的状态栏设置和iOS不一样,要重新设置颜色

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容