React Native ScrollToIndex 太慢了答案

【问题标题】：ReactNative ScrollToIndex too slowReact Native ScrollToIndex 太慢了
【发布时间】：2020-10-29 04:25:39
【问题描述】：

我使用 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>
  );
}

【问题讨论】：

尝试使用animation:false。
还是超级慢
这是因为 initialNumToRender，请在此处阅读更多信息。 reactnative.dev/docs/virtualizedlist#initialnumtorender
尝试生产版本，我的意思是生成 apk 或 ipa。大多数virtulizedlist 和flatlist 渲染问题仅适用于开发版本。

标签： react-native react-native-flatlist scrolltoindex

【解决方案1】：

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

Link - Flatlist 性能缓慢

Link - VirtualizedList: 你有一个更新缓慢的大列表

【讨论】：