React Native如何点击字母按钮动态滚动到对应术语表元素

现有代码失效源于三个实现错误：

• 循环渲染时复用单个useRef绑定区块，ref最终只会指向最后一个渲染完成的字母区块，无法存储所有区块的引用
• React Native原生组件不支持web端的scrollIntoViewAPI，且字母按钮的onPress回调中仅写了函数名未执行，点击不会触发任何逻辑
• RN环境下混用web端<div>标签会导致原生端渲染异常

不需要依赖页面重渲染，改用ref对象按字母维度存储所有区块的位置信息，配合ScrollView原生滚动方法即可实现无刷新定位，完整可运行代码如下：

import React from "react";
import { View, Text, ScrollView, TouchableOpacity } from "react-native";

export default function App() {
  // 存储每个字母区块相对于ScrollView顶部的y轴坐标
  const sectionYRef = React.useRef<Record<string, number>>({});
  // 绑定ScrollView实例，用于调用滚动方法
  const scrollRef = React.useRef<ScrollView>(null);

  // 跳转到指定字母区块
  const scrollToSection = (letter: string) => {
    const targetY = sectionYRef.current[letter];
    if (targetY !== undefined && scrollRef.current) {
      scrollRef.current.scrollTo({ y: targetY, animated: true });
    }
  };

  // 布局完成时记录对应字母区块的位置
  const collectSectionPosition = (letter: string, y: number) => {
    sectionYRef.current[letter] = y;
  };

  // 术语表数据源，可替换为你的完整26个字母数据
  const letterList = [
    {
      id: 1,
      name: "A",
      data: ["Abricot", "Abricot", "Abricot", "Artichaud", "Artichaud"],
      description: [
        "Un abricot est un fruit",
        "Un abricot est un fruit",
        "Un abricot est un fruit",
        "Un artichaud est un légume",
        "Un artichaud est un légume",
      ],
    },
    {
      id: 2,
      name: "B",
      data: ["Branche", "Branche", "Branche"],
      description: [
        "Une branche vient d'un arbre",
        "Une branche vient d'un arbre",
        "Une branche vient d'un arbre",
      ],
    },
    {
      id: 3,
      name: "C",
      data: [],
      description: [],
    },
  ];

  return (
    <View style={{ flex: 1 }}>
      <ScrollView ref={scrollRef}>
        <View style={{ padding: 16 }}>
          <Text style={{ fontSize: 24, fontWeight: "bold" }}>Glossary</Text>
          {/* 字母索引栏 */}
          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginVertical: 16 }}>
            {letterList.map((item) => {
              if (item.data.length < 1) return null;
              return (
                <TouchableOpacity
                  key={item.id}
                  onPress={() => scrollToSection(item.name)}
                  style={{ paddingHorizontal: 12, paddingVertical: 6, backgroundColor: "#f5f5f5", borderRadius: 4 }}
                >
                  <Text>{item.name}</Text>
                </TouchableOpacity>
              );
            })}
          </View>

          {/* 词条内容区 */}
          <View>
            {letterList.map((item) => {
              if (item.data.length < 1) return null;
              return (
                <View
                  key={item.id}
                  onLayout={(e) => collectSectionPosition(item.name, e.nativeEvent.layout.y)}
                  style={{ marginBottom: 32 }}
                >
                  <Text style={{ fontSize: 20, fontWeight: "bold" }}>{item.name}</Text>
                  {item.data.map((term, idx) => (
                    <View key={idx} style={{ marginTop: 12 }}>
                      <Text style={{ fontWeight: "600" }}>{term}</Text>
                      <Text style={{ marginTop: 4, color: "#666" }}>{item.description[idx]}</Text>
                    </View>
                  ))}
                </View>
              );
            })}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

• 用onLayout回调收集每个区块的y轴坐标存入ref，比给每个节点绑定ref性能更高，且不需要触发组件重渲染
• 所有位置数据存在ref中，页面初始加载完成后就会完成所有位置收集，点击索引时直接读取对应坐标调用ScrollView的scrollTo方法即可完成定位
• 直接过滤掉无词条的字母，避免出现点击后跳转到空白区域的问题
• 全部使用RN原生组件，没有混用web端API和标签，可直接在iOS/安卓端运行

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