React Native FlatList 性能改进答案

【问题标题】：React Native FlatList performance improvementsReact Native FlatList 性能改进
【发布时间】：2022-01-03 09:08:49
【问题描述】：

我正在读取条形码，我读取的每个条形码都添加到数组中并显示在平面列表中。但是在添加到阵列中的 30 个条码后变得缓慢。有什么办法可以解决吗？

renderItem：

const renderItem = useCallback(
    ({item, index}) => (
      <View style={styles.ListItemContainer}>
        <Text>
          -{item} index: {index}
        </Text>
        <TouchableOpacity
          onPress={() => {
            setRemovedItem(index);
            setShowAlert(true);
          }}>
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>X</Text>
        </TouchableOpacity>
      </View>
    ),
    [],
  );

FlatList 组件：

<FlatList
        renderItem={renderItem}
        data={barcodeArray}
        style={styles.ListContainer}
        keyboardShouldPersistTaps="handled"
        initialNumToRender={12}
        removeClippedSubviews
        windowSize={12}
        maxToRenderPerBatch={12}
      />

添加条码：

const readBarcode = barcode => {
    setbarcodeArray([barcode, ...barcodeArray]);
    setbarcodeValue('');
    setkey(key + 1);
  };

【问题讨论】：

标签： react-native performance react-native-flatlist

【解决方案1】：

对于此解决方案，您可以使用 VirtualizedList 代替 Flatlist 。通常，只有在您需要比 FlatList 更大的灵活性时才应该真正使用它。欲了解更多信息，请参阅this

【讨论】：

【解决方案2】：

您是否尝试过使用这个：https://github.com/Flipkart/recyclerlistview 库。它呈现比 FlatList 少得多的项目，然后回收它们。应该比原生 flatlist 更快、更高效。如果这不起作用，那么如果您有固定的内容高度，请尝试在 flatlist 中使用 getItemLayout。

【讨论】：