React Native中如何让ScrollView无论滚动多快都仅吸附对齐相邻视图？

你遇到的是React Native原生ScrollView的snap特性默认不限制滑动步长的问题，以下是两种可行的实现方案：

方案1：官方属性实现（优先推荐） #

RN 0.62及以上版本直接新增disableIntervalMomentum属性即可，该属性会强制一次动量滑动最多只能经过一个snap对齐点，完美匹配需求。同时配合snapToOffsets替代原有对齐配置，避免居中对齐的计算误差：

<ScrollView 
  horizontal={true} 
  // 提前生成所有页面的对齐偏移量，3对应你的页面总数，可根据实际数量动态生成
  snapToOffsets={Array.from({length: 3}, (_, index) => index * ScreenWidth)}
  // *核心属性：限制一次滑动最多跳一页*
  disableIntervalMomentum={true}
  decelerationRate="fast" 
  showsHorizontalScrollIndicator={false}
>
  <View style={{width: ScreenWidth}}>...</View>
  <View style={{width: ScreenWidth}}>...</View>
  <View style={{width: ScreenWidth}}>...</View>
</ScrollView>

注意你的原代码中子节点style的width属性写的是Screen，需修正为ScreenWidth和snap配置保持一致。

方案2：手动控制滑动（兼容低版本RN） #

如果你的RN版本低于0.62不支持上述属性，可以通过监听滑动事件手动限制跳转页码：

import { useRef } from 'react';

// 组件内定义ref
const scrollViewRef = useRef(null);
// 记录拖拽开始时的当前页码
const currentPageRef = useRef(0);
// 你的总页面数
const TOTAL_PAGES = 3;

// ScrollView配置
<ScrollView
  ref={scrollViewRef}
  horizontal={true}
  snapToInterval={ScreenWidth}
  decelerationRate="fast"
  snapToAlignment="center"
  pagingEnabled={false}
  onScrollBeginDrag={() => {
    // 拖拽开始时记录当前所在页码
    currentPageRef.current = Math.round(scrollViewRef.current.scrollLeft / ScreenWidth);
  }}
  onMomentumScrollEnd={(e) => {
    const offsetX = e.nativeEvent.contentOffset.x;
    const targetPage = Math.round(offsetX / ScreenWidth);
    // 限制只能在当前页的前后一页范围内跳转
    const finalPage = Math.max(
      0,
      Math.min(
        TOTAL_PAGES - 1,
        targetPage > currentPageRef.current ? currentPageRef.current + 1 : currentPageRef.current - 1
      )
    );
    // 偏移不符合预期时强制滚动到目标页
    if (Math.round(finalPage * ScreenWidth) !== Math.round(offsetX)) {
      scrollViewRef.current.scrollTo({
        x: finalPage * ScreenWidth,
        animated: true
      });
    }
  }}
>
  <View style={{width: ScreenWidth}}>...</View>
  <View style={{width: ScreenWidth}}>...</View>
  <View style={{width: ScreenWidth}}>...</View>
</ScrollView>

内容的提问来源于stack exchange，提问作者user15573857