React Native中如何实现点击按钮时向下滚动指定距离？

你之前的写法无法生效核心是两个错误：

• 普通View组件没有focus()实例方法，调用这个方法不会触发任何滚动行为
• 滚动控制的API全部挂载在外层可滚动容器（ScrollView/FlatList等滚动类组件）的实例上，绑定到普通内容View上无法实现滚动控制

完全可以实现点击按钮向下滚动指定长度的需求，步骤如下：

1. 初始化滚动容器的ref

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

// 组件内部声明ref
const scrollRef = useRef(null);
// 如果需要做增量滚动（在当前位置基础上往下滚固定长度），额外存当前滚动偏移
const currentScrollY = useRef(0);

2. 给外层滚动容器绑定ref，同时如果需要增量滚动就绑定滚动事件监听

return (
  <ScrollView
    ref={scrollRef}
    // 不需要增量滚动可以删掉下面两个属性
    onScroll={(e) => {
      currentScrollY.current = e.nativeEvent.contentOffset.y;
    }}
    scrollEventThrottle={16}
  >
    {/* 这里放你所有的页面内容，包括点击按钮、目标元素 */}

    {/* 你之前绑定错了的viewRef不需要再绑，普通View不用额外处理 */}
    <View>
      {/* 你的其他内容 */}
    </View>
  </ScrollView>
)

3. 修改点击事件逻辑，调用滚动容器的scrollTo方法完成滚动
   把你之前的Text替换成TouchableOpacity，修改onPress逻辑：

return (
  <View>
    <TouchableOpacity
      onPress={() => {
        idData = data.id;
        totalid++; // 你要滚动的y轴长度
        alert("mon id est: " + idData);
        
        // 固定位置滚动：直接滚动到页面y轴偏移为totalid的位置
        scrollRef.current?.scrollTo({
          y: totalid,
          animated: true, // 设为false会无动画直接跳转
        });

        // ———— 如果是要在当前位置基础上向下滚totalid长度，用下面这段替换上面的scrollTo调用 ————
        // scrollRef.current?.scrollTo({
        //   y: currentScrollY.current + totalid,
        //   animated: true,
        // })
      }}
    >
      <Text>{Data.name}</Text>
    </TouchableOpacity>
  </View>
)

• 如果你用的是FlatList/SectionList列表组件，API和ScrollView基本一致，同样是给列表组件绑定ref，调用scrollToOffset方法即可实现相同效果
• 不要尝试给非滚动组件（普通View、Text等）调用滚动相关方法，这类组件本身不提供滚动控制能力

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