FlashList 的渲染大小不可用

Question

我正在从 迁移FlatList到FlashList，我已将我的 expo sdk 从 升级到 ，45.0.0并且46.0.0在实施FlashListshopify/flashlist 文档中的 as 时，我收到以下警告

FlashList 的渲染大小不可用。高度或宽度太小 (<2px)。请确保列表的父视图具有有效的大小。FlashList 将与父级的大小相匹配。

它工作得很好FlatList，只是从 api 加载数据需要花费很多时间，，，这就是为什么我决定切换到FlashList. 有人知道如何解决这个问题吗？如有任何帮助，我们将不胜感激。这是我的代码

渲染项函数

    const renderItem = ({ item: product }) => {
    return (
      <Product
        category={product.bp_product_category}
        itemname={product.bp_product_name}
        price={product.bp_product_selling_price}
        mass={product.bp_product_mass}
        unitofmass={product.bp_product_unit_of_mass}
        productID={product._id}
      />
    );
    };


      const keyExtractor = useCallback((item) => item._id, []);
      const filteredproducts = products.filter((product, i) =>
      product.bp_product_name.toLowerCase().includes(search.toLowerCase())
       );

FlashList 本身

    <View style={{flex:1, width:'100%', height:'100%'}} >
       <FlashList
          keyExtractor={keyExtractor}
          data={filteredproducts}
          renderItem={renderItem}
          estimatedItemSize={200}
          numColumns={2}
          refreshing={refresh}
          onRefresh={Refresh}
          contentContainerStyle={{
            // alignSelf: "flex-start",
            // justifyContent: "space-between",
            // paddingBottom: 120,
          }}
      />
   </View>

Answer 1

我遇到了同样的问题并出现警告FlashList rendered size is not useable，屏幕一片空白。

根据FlashList 文档，我们应该在包装器中使用它，就像View硬编码的高度样式数字一样，如下所示：

<View style={{ height: 200, width: Dimensions.get("screen").width }}>
    <FlashList
       data={DATA}
       renderItem={({ item }) => <Text>{item.title}</Text>}
       estimatedItemSize={200}
    />
</View>

如果我处于你的立场，我会让一个简单的闪存列表完美地工作，然后我会实现我想要的列表并向其中添加更多内容。

这解决了我的问题。希望你能成功。

Answer 2

来自文档：

...因此，请确保列表的父级安装具有有效的大小 (>=2px)，并且 FlashList 将与其父级的大小匹配。...

因此，我决定将FlashList包装到View中，并将minHeight属性设置为 2，这满足了文档中的声明。

<View style={{minHeight: 2}}>
    <FlashList ... /> 
</View>

结果，警告消失了。