以编程方式设置react原生VirtualizedList的滚动索引

npm install react-native
npm install react-native-virtualized-list

import React from 'react';
import { VirtualizedList, Text, View } from 'react-native';

const MyVirtualizedList = () => {
  const data = Array.from({ length: 1000 }, (_, index) => index); // 创建一个包含1000个元素的数据数组

  const getItem = (data, index) => {
    return {
      id: index,
      title: `Item ${index}`
    };
  };

  const getItemCount = (data) => {
    return data.length;
  };

  const renderItem = ({ item }) => {
    return (
      <View>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <VirtualizedList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      getItemCount={getItemCount}
      getItem={getItem}
    />
  );
};

export default MyVirtualizedList;

import React, { useRef } from 'react';
import { Button } from 'react-native';
import MyVirtualizedList from './MyVirtualizedList';

const App = () => {
  const virtualizedListRef = useRef(null);

  const scrollToIndex = () => {
    virtualizedListRef.current?.scrollToIndex({ index: 10, animated: true });
  };

  return (
    <>
      <MyVirtualizedList ref={virtualizedListRef} />
      <Button title="Scroll to Index" onPress={scrollToIndex} />
    </>
  );
};

export default App;