FlatList，不变冲突:numColumns不支持水平

Question

在我的项目中，它显示了上述错误。

ProductContainer.js:

import React, { useState, useEffect } from 'react'
import { View, Text, StyleSheet, ActivityIndicator, FlatList } from 
'react-native'
import ProductList from './ProductList';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
const [products, setProducts ] = useState([]);
useEffect(() => {
setProducts(data);
return () => {
setProducts([])
}
}, [])
return (
<View>
<Text>Product Container</Text>
<View style={{ marginTop: 100}}>
<FlatList
numColumns={2}
horizontal
data={products}
renderItem={({item}) => <ProductList 
key={item.id}
item={item}/>}
keyExtractor={item => item.name}

/>
</View>
</View>
)
}
export default ProductContainer;

错误详细信息：

This error is located at:
in FlatList (created by ProductContainer)
in RCTView (created by View)
in View (created by ProductContainer)
in RCTView (created by View)
in View (created by ProductContainer)
in ProductContainer (created by App)
in RCTView (created by View)
in View (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

如果你愿意，我也可以提供其他细节。

提前感谢

Answer 1

不能有多列的水平FlatList。React Native的文档就是这么说的：

多个列只能用horizontal={false}渲染，并且将像flexWrap布局一样呈Z字形。所有项目都应具有相同的高度——不支持砌体布局。

如果希望FlatList是水平的，则应删除numColumns=2；如果希望有两列，则应将水平设置为false。

<FlatList
numColumns={2}
horizontal={false} 
data={products}
renderItem={({item}) => <ProductList 
key={item.id}
item={item}/>}
keyExtractor={item => item.name}

/>