android - 在 Android 上 react native Flatlist 崩溃

Question

使用 Flatlist 会导致应用程序在 Android 上崩溃。我的代码是，

<ScrollView style={{ flex:1 }}>
  <View style={{
              justifyContent: "space-around"
            }}
          >
            <FlatList
              data={this.state.topSuggested}
              keyExtractor={(item, index) => index.toString()}
              numColumns={3}
              renderItem={({ item, index }) => (
                <TopTileCard
                  id={item.dish_type_id}
                  name={item.name}
                  image={item.image}
                  pieces={item["COUNT(restaurant_items.id)"]}
                  onCardClick={this.topItemClick}
                  key={index}
                />
              )}
            />
          </View>
</ScrollView>

它只渲染了 6 次，但它会导致应用程序崩溃，当上面的 FlatList 被删除时，应用程序工作正常，

关于为什么会发生这种情况的任何想法，我曾经使用 FlatList 在我的应用程序的其他屏幕中呈现超过 200 个项目，但这会导致应用程序崩溃。

当我在不同的设备上运行该应用程序并检查 logcat 时，我发现崩溃是由于内存不足导致的。由于某种原因，呈现此页面占用大约 800 MB 的内存。

topSuggested 示例

[
  {
    COUNT(restaurant_items.id):7,
    dish_type_id:21,
    image:null,
    name:"Cheese Toast",
    type:"top"
  },
  {
    COUNT(restaurant_items.id):6,
    dish_type_id:548,
    image:null,
    name:"Chicken Biryani",
    type:"top"
  }

]

顶部的 Suggested 有六个对象。像上面一样

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

我在 Flatlist 上遇到了类似的问题，它试图在一些较旧的 Android 版本上渲染大量项目。将 initialNumToRender prop 添加到 FlatList 对我有用，尝试将其设置为非常低的数字，例如 1 或 2。这仅意味着使用将看到更多项目出现在屏幕上，我认为这很好。

或者，您可以删除 ScrollView，因为您似乎不需要它。