组件挂载时如何使用ScrollView滚动到指定列表项？

现有代码的核心问题 #

• 用单个状态y存储所有列表项的布局位置，最终只会保留最后一个项的坐标，无法获取目标项的正确位置
• scrollTo的y值计算逻辑错误，data.length * index完全不符合实际坐标计算规则
• 依赖项包含y导致useEffect频繁触发，逻辑执行混乱

修正后的实现代码 #

import React, { useRef, useEffect } from 'react';
import { View, ScrollView, Text } from 'react-native';

const Screen = ({ id, data }) => {
  const scrollViewRef = useRef(null);
  // 存储顶部视图的实际高度
  const topViewHeight = useRef(0);
  // 存储每个列表项的位置，key为item的_id，value为y坐标
  const itemPositions = useRef({});

  useEffect(() => {
    if (data.length > 0 && id && scrollViewRef.current) {
      const targetY = itemPositions.current[id];
      if (targetY !== undefined) {
        // 滚动位置 = 顶部视图高度 + 目标项的y坐标
        scrollViewRef.current.scrollTo({
          y: topViewHeight.current + targetY,
          animated: true
        });
      }
    }
  }, [data, id]);

  return (
    <ScrollView ref={scrollViewRef}>
      {/* 顶部可变高度视图，获取实际高度 */}
      <View
        style={{ backgroundColor: "red" }}
        onLayout={(e) => {
          topViewHeight.current = e.nativeEvent.layout.height;
        }}
      ></View>
      {data.length > 0 && data.map((item) => (
        <View
          key={item._id} // 用item唯一标识作为key，避免index的潜在问题
          style={{ height: 250, backgroundColor: "green", margin: 20 }}
          onLayout={(e) => {
            const { y } = e.nativeEvent.layout;
            // 存储当前项的y坐标
            itemPositions.current[item._id] = y;
          }}
        >
          <Text>{item.name}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

export default Screen;

关键修改说明 #

• 用itemPositions ref对象存储每个项的位置，避免状态更新导致的值覆盖和不必要重渲染
• 给顶部可变高度视图添加onLayout事件，动态获取其实际高度，解决高度不固定的问题
• 滚动目标位置计算为顶部视图高度 + 目标项的y坐标，确保滚动到正确位置
• 列表项key改用item._id，符合React最佳实践
• 移除冗余的y状态，简化依赖项，减少无效的useEffect触发

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