如何让React中使用React.memo包裹的横向ScrollView在重新渲染时自动回到x=0初始位置

这个场景我之前开发时也遇到过，其实用React的Ref结合Effect钩子就能轻松解决，具体做法我给你拆解一下：

• 创建ScrollView的引用：在你的CustomComp组件内部，用useRef钩子创建一个引用对象，用来获取ScrollView的原生实例，这样我们就能调用它的滚动控制方法了。
• 绑定引用到ScrollView：把这个引用绑定到<ScrollView>组件上，确保组件挂载后能拿到它的实例。
• 触发滚动重置：利用useEffect钩子，在组件重新渲染（也就是props变化触发React.memo更新时），调用ScrollView的scrollTo方法，将x轴位置重置为0。

完整代码示例 #

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

const CustomComp = memo(({ ...props }) => {
  // 创建ScrollView的引用
  const scrollRef = useRef(null);

  // 当组件props变化（触发重新渲染）时，重置滚动位置
  useEffect(() => {
    // 确保ref已关联到ScrollView实例，避免初始化时的报错
    scrollRef.current?.scrollTo({
      x: 0,
      animated: false, // 想要平滑动画的话可以改成true
    });
  }, [props]); // 依赖项设为组件接收的props，props变化时触发

  return (
    <ScrollView
      ref={scrollRef} // 将引用绑定到ScrollView
      horizontal={true}
      {...props}
    >
      {/* 你的内容区域 */}
    </ScrollView>
  );
});

export default CustomComp;

额外说明 #

• 如果你的组件重新渲染是由某个特定props触发的（比如列表数据data、选中项activeItem），可以把useEffect的依赖项改成这个特定props（比如[data]），这样能更精准地触发滚动重置，避免不必要的执行。
• animated参数控制滚动是否带动画：false是瞬间回到初始位置，true会有平滑的滚动过渡效果，你可以根据产品需求选择。
• 用可选链操作符?.是为了避免组件挂载初期，ref还未关联到ScrollView实例时出现undefined报错。

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