React Native TS中useRef+scrollIntoView点击滚动失效问题

你的代码有两处核心错误，直接导致滚动逻辑不触发：

• 点击事件回调未执行滚动函数：onPress的回调函数里只写了scrollToElement的函数引用，没有加()做调用，点击时根本不会运行滚动逻辑，属于语法疏漏。
• ref类型声明和实际绑定元素不匹配：你把fieldRef的类型标注为HTMLInputElement | null，但实际ref绑定的是普通div标签，对应DOM类型应为HTMLDivElement，类型不匹配会带来潜在的运行/校验异常。

直接替换对应代码即可，额外加了平滑滚动的可选配置，不需要可以删掉：

// 修正ref泛型类型，和绑定的div元素匹配
const fieldRef = React.useRef<null | HTMLDivElement>(null);
const scrollToElement = () => fieldRef.current?.scrollIntoView({ behavior: 'smooth' });

// ...

{/* 修正点击回调，实际调用滚动函数 */}
<Text
  onPress={() => {
    scrollToElement();
  }}
> 
  Here
</Text>

// ...

<div ref={fieldRef}>
  <Text> Hello</Text>
</div>

补充说明：如果你的Text组件是React Native端的组件，注意scrollIntoView是Web端DOM API，RN端不生效，需要用ScrollView的scrollTo方法实现对应效果。如果是Web端基于React封装的自定义Text组件，上述修复代码可直接生效。

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