React Native ScrollView选中项无法滚动定位且自动回滚问题求助

问题原因 #

1. 硬编码宽度导致滚动偏移错误：用固定的60作为分类项宽度，但不同分类文本长度不同（比如BURGERS比PIZZA宽），再加上space-x-5的间距，计算出的offset完全不符合实际位置，导致点击后无法滚动到正确位置。
2. 手动滚动后回滚的问题：同样因为偏移计算错误，当手动滚动到右侧分类并选中时，错误的offset会让ScrollView滚回起始位置。
3. 未处理屏幕适配：没有考虑将选中分类调整到屏幕指定区域（比如居中）的逻辑，只是单纯滚动到分类的起始位置。

修复方案 #

• 用onLayout获取每个分类项的实际布局信息（位置、宽度），代替硬编码宽度。
• 计算滚动偏移时，结合屏幕宽度，让选中分类居中显示（或指定区域）。
• 优化滚动逻辑，确保偏移量在合理范围内，避免无效滚动。

修改后的代码 #

import { useState, useEffect, useRef } from 'react';
import { View, ScrollView, TouchableOpacity, Text, Dimensions } from 'react-native';

const categories = ['PIZZA', 'BURGERS', 'SUSHI', 'SODA', 'ICE-CREAM'];
const [selectedCategory, setSelectedCategory] = useState(categories[0]);

const CategoryList = () => {
  const scrollViewRef = useRef(null);
  const categoryLayouts = useRef([]); // 存储每个分类项的布局信息
  const screenWidth = Dimensions.get('window').width;

  // 获取每个分类项的实际位置和宽度
  const handleCategoryLayout = (index, event) => {
    const { x, width } = event.nativeEvent.layout;
    categoryLayouts.current[index] = { x, width };
  };

  useEffect(() => {
    const index = categories.indexOf(selectedCategory);
    scrollToCategory(index);
  }, [selectedCategory]);

  const handleCategoryPress = (index) => {
    setSelectedCategory(categories[index]);
  };

  const scrollToCategory = (index) => {
    if (!scrollViewRef.current || !categoryLayouts.current[index]) return;

    const { x: categoryX, width: categoryWidth } = categoryLayouts.current[index];
    // 计算让分类居中的偏移量
    const targetOffset = categoryX - (screenWidth / 2) + (categoryWidth / 2);
    // 限制偏移量，避免滚出内容边界
    const lastCategory = categoryLayouts.current[categoryLayouts.current.length - 1];
    const maxOffset = lastCategory.x + lastCategory.width - screenWidth;
    const finalOffset = Math.max(0, Math.min(targetOffset, maxOffset));

    scrollViewRef.current.scrollTo({ x: finalOffset, animated: true });
  };

  return (
    <ScrollView
      ref={scrollViewRef}
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: 20, paddingVertical: 10 }}
    >
      <View className="flex-row space-x-5">
        {categories.map((category, index) => (
          <TouchableOpacity
            key={index}
            activeOpacity={0.8}
            onPress={() => handleCategoryPress(index)}
            onLayout={(e) => handleCategoryLayout(index, e)}
          >
            <Text
              style={[
                styles.categoryText, 
                selectedCategory === category && styles.categoryTextSelected
              ]}
            >
              {category}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </ScrollView>
  );
};

// 示例样式，可根据实际需求调整
const styles = {
  categoryText: {
    fontSize: 16,
    color: '#888',
  },
  categoryTextSelected: {
    color: '#000',
    fontWeight: 'bold',
  },
};

关键优化点 #

• 动态布局采集：通过onLayout实时获取每个分类的真实位置和宽度，彻底解决硬编码宽度的误差问题。
• 居中对齐逻辑：让选中分类的中心与屏幕中心对齐，符合用户的视觉预期。
• 边界限制：确保滚动偏移不会超出内容范围，避免出现空白滚动区域。

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