Horizontal ScrollView/FlatList 在单击内部按钮时一直跳到末尾

Question

我有一个水平的 ScrollView/FlatList（都尝试解决这个问题）作为我应用程序一部分的导航栏。视图/列表只包含所有不同的按钮。

问题：只要单击其中一个按钮，滚动条就会一直跳到最后。 起初我想可能是因为它是重新渲染的，所以我试图将当前值保留在组件内而不是从父级获取它，并且只将新选择的元素传递给父级，但问题仍然存在（也许它仍在渲染，因为父级持有的状态仍在变化？）。

无论如何，我认为它不再是那样了，因为它不会跳回到它的初始起点。它跳到最后。如果它正在重新渲染，如果没有结束，它会跳回到开始。

我已经尝试过 FlatList 和 ScrollView，但两者都存在问题。

import { View, ScrollView, FlatList, Text, TouchableOpacity } from "react-native";
import React, { useState } from "react";
import useVehicles from "../../hooks/useVehicles";

type Categories =
  | "all"
  | "basic"
  | "current"
  | "technical"
  | "safety"
  | "pollution"
  | "history";

type Props = {
  setFilter: (filter: Categories) => void;
};

const CATEGORIES: { name: string; id: Categories }[] = [
  { name: "הכל", id: "all" },
  { name: "בסיסי", id: "basic" },
  { name: "נתונים עדכניים", id: "current" },
  { name: "נתונים טכניים", id: "technical" },
  { name: "בטיחות", id: "safety" },
  { name: "זיהום", id: "pollution" },
  { name: "היסטוריה", id: "history" },
];

const DetailsCategoryNavigation = ({ setFilter }: Props) => {
  const { basicGovData } = useVehicles();

  const [current, setCurrent] = useState<
    | "all"
    | "basic"
    | "current"
    | "technical"
    | "safety"
    | "pollution"
    | "history"
  >();

  function handleClick(categoryId) {
    setFilter(categoryId);
    setCurrent(categoryId);
  }

  if (!basicGovData) return null;

  return (
    <View className="mb-3">
        <FlatList
        horizontal
        contentContainerStyle={{
          paddingHorizontal: 24,
        }}
        data={CATEGORIES}
        renderItem={({item}) => (
          <TouchableOpacity
            className={
              current === item.id
                ? "bg-gray-200 rounded-md px-4 py-2 h-10 items-center justify-center"
                : "px-4 py-2 h-10 items-center justify-center"
            }
            onPress={() => handleClick(item.id)}
            key={item.id}
          >
            <Text
              className={
                current === item.id ? "text-base font-semibold" : "text-base"
              }
            >
              {item.name}
            </Text>
          </TouchableOpacity>
        )}
        className="mb-3 space-x-2"
      />
      {/* <ScrollView
        showsHorizontalScrollIndicator={false}
        horizontal
        contentContainerStyle={{
          paddingHorizontal: 24,
        }}
        className="mb-3 space-x-2"
      >
        {CATEGORIES.map((category, index) => (
          <TouchableOpacity
            className={
              current === category.id
                ? "bg-gray-200 rounded-md px-4 py-2 h-10 items-center justify-center"
                : "px-4 py-2 h-10 items-center justify-center"
            }
            onPress={() => handleClick(category.id)}
            key={index}
          >
            <Text
              className={
                current === category.id ? "text-base font-semibold" : "text-base"
              }
            >
              {category.name}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView> */}
    </View>
  );
};

export default DetailsCategoryNavigation;