React Native基于ScrollView实现横向滑动惯性自动滚动效果

你要实现的滑动后自动停靠在对应头像位置的惯性效果，可以直接通过 ScrollView 原生属性完成，无需引入额外第三方库，修改方案如下： #

第一步：提取公共常量 #

首先把单个头像项的宽度提取为全局常量，避免多处重复写数值，后续调整尺寸时只要改一处即可：

const { width } = Dimensions.get('window');
// 单个头像项的宽度，和样式里的宽度保持一致
const ITEM_WIDTH = width * 0.2;

第二步：修改组件逻辑 #

新增 ScrollView 引用、滑动结束监听、点击自动滚动逻辑：

import { useState, useRef } from 'react';
import { ScrollView, TouchableWithoutFeedback, View } from 'react-native';
// 你原有引入的ImageCircle等组件保留即可

const YourComponent = () => {
  const [active, setActive] = useState(0);
  // 创建ScrollView引用，用于主动触发滚动
  const scrollViewRef = useRef(null);

  // 惯性滚动结束后，自动计算当前选中的头像索引
  const handleScrollEnd = (e) => {
    const offsetX = e.nativeEvent.contentOffset.x;
    const currentIndex = Math.round(offsetX / ITEM_WIDTH);
    if (currentIndex !== active) setActive(currentIndex);
  };

  // 点击头像时，自动滚动到对应位置
  const handleItemPress = (index) => {
    setActive(index);
    scrollViewRef.current?.scrollTo({
      x: index * ITEM_WIDTH,
      animated: true
    });
  };

  return (
    <ScrollView
      ref={scrollViewRef}
      style={styles.scrollView}
      horizontal={true}
      contentContainerStyle={styles.scrollViewContainer}
      showsHorizontalScrollIndicator={false}
      {/* 核心停靠属性配置 */}
      snapToInterval={ITEM_WIDTH}
      snapToAlignment="center"
      decelerationRate="fast"
      scrollEventThrottle={16}
      onMomentumScrollEnd={handleScrollEnd}
    >
      {profileData.map((profile, index) => {
        return (
          <TouchableWithoutFeedback
            key={`${index}Profile`}
            onPress={() => handleItemPress(index)}
          >
            <View style={styles.imageCircle}>
              <ImageCircle uri={profile.path} active={index === active} />
            </View>
          </TouchableWithoutFeedback>
        );
      })}
    </ScrollView>
  );
};

第三步：调整样式（可选） #

把样式里的硬编码宽度替换为刚才提取的常量，保持全局统一：

import { StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const ITEM_WIDTH = width * 0.2;

const styles = StyleSheet.create({
  scrollView: {
    height: 100,
  },
  scrollViewContainer: {
    paddingHorizontal: width * 0.5 - ITEM_WIDTH / 2,
  },
  imageCircle: {
    width: ITEM_WIDTH,
    flexDirection: 'row',
    justifyContent: 'center',
  },
});

export default styles;

属性说明 #

• snapToInterval：设置滚动停靠的间隔距离，值和单个头像项宽度一致，滚动结束时会自动停靠到最近的间隔点
• snapToAlignment：设置停靠对齐方式，设为center可让选中头像始终保持在ScrollView居中位置
• decelerationRate：设置滚动减速速率，设为fast可以让惯性停止的效果更自然
• onMomentumScrollEnd：监听惯性滚动结束事件，自动更新当前选中的头像状态

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