React-Native 使用 ScrollView 简单实现 Banner 功能

最新推荐文章于 2025-12-30 23:13:09 发布

原创

最新推荐文章于 2025-12-30 23:13:09 发布 · 1.6k 阅读

本文介绍了如何在React-Native中使用ScrollView创建Banner滚动效果。通过监听ScrollView的滚动事件，计算并更新滚动偏移量，实现Banner的滑动切换，并更新底部指示器状态。详细讲解了初始偏移量设置、滚动过程处理、偏移量获取和UI刷新的步骤，并提供了完整实现代码。

前言

遇到一个需求，需要做到一个2行列表的滑动，并且要求有底部的指示器，实际就是一个 banner ，由于原本代码是每行4个，分成2行，无法滚动，现在要在原有基础上改造成一行5个可滚动，故而没有大动代码，只是在外层嵌套 ScrollView ，利用滚动的属性模拟出了 banner 的效果：

项目效果

实现

初始偏移量

方案的主要思路在于 ScrollView 的滚动监听，每次滚动开始之前，通过 onScrollBeginDrag 方法初始化总的偏移量：

onScrollBeginDrag = {
  
  event => {
        this.setState({
            totalOffset:0
        })
    }
}

滚动过程

在滚动过程中，滚动开始前onScrollBeginDrag 执行，然后可能有一个或多个 onScroll 执行，拖拽动作结束之后会执行 onScrollEndDrag ，但是此时 onScroll 还可能执行，因为拖拽完成之后页面可能因为惯性继续滑。
这里写图片描述
关于 React-Native 触摸事件的生命周期，这里有一篇文章可以了解下：

https://blog.csdn.net/liu__520/article/details/53676834

偏移量获取

通过 event.nativeEvent.contentOffset.x 拿到当前一个 onScroll 的偏移量，

计算总偏移，刷新UI

因为在 onScrollEndDrag 后，仍旧有 onScroll 事件，故而没有使用 onScrollEndDrag 中判断累计滑动的方式来实现，而是在 onScroll 中计算。

通过拿取当前onScroll中的event.nativeEvent.contentOffset.x叠加到总偏移量中，如果总偏移量(多个 onScroll 偏移量的总和) 超过单个 item宽度或者单个 onScroll 偏移量大于 item宽度，代表滑动到新的页面了，需要更新底部圆点指示器的颜色(通过改变state中curPageIndex的值)：

onScroll = { event => {
    // 拿到当前一次滚动的x偏移量
     const currentOffset = event.nativeEvent.contentOffset.x;
      const dif = currentOffset - (this.offset || 0);
      //由于一次滚动可能有多个onScroll事件，所以需要拿到当前总的偏移量，去计算新的总偏移量
      let curTotal = this.state.totalOffset