react-native - ReactNative ScrollToIndex 太慢了

Question

我使用 react native 为法律文件创建应用程序。我需要文档可滚动。我使用 VirtualizedList 渲染它。事情是当我尝试使用 scrollToIndex(index: 'something') 时，性能太慢了。我的列表包含大约 4000 个渲染项目（每个项目大约有一段长）。

有什么办法可以让这个运行更顺畅吗？

export default function App() {
  const scroller = useRef();

  return (
    <SafeAreaView>
      <View style={styles.upperContainer}>
          <CustomButton
            onPress={() => {
              scroller.current.scrollToIndex({ index: 1547 });
            }}
          />
        </View>
      <View style={styles.flatContainer}>
        <VirtualizedList
          ref={scroller}
          data={data}
          renderItem={({ item }) => (
            <CustomText data={item.content} type={item.type} />
          )}
          getItem={(data, index) => data[index]}
          getItemCount={(data) => data.length}
          keyExtractor={(item) => item.number.toString()}
          initialNumToRender={4000}
          onScrollToIndexFailed={() => {
            alert('error');
          }}
        />
      </View>
    </SafeAreaView>
  );
}

Answer 1

这个问题与这些问题类似，也许您可​​以参考一些答案，看看什么对您的案例有效。基本上，您需要一个纯组件来完成这项工作。

链接- Flatlist 性能缓慢

链接- VirtualizedList：您有一个更新缓慢的大型列表