FlatList，不变违规：numColumns 不支持水平答案

【问题标题】：FlatList, Invariant Violation: numColumns does not support horizontalFlatList，不变违规：numColumns 不支持水平
【发布时间】：2022-08-08 00:41:01
【问题描述】：

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

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

如果您愿意，我还可以提供其他详细信息。

提前致谢

标签： javascript reactjs react-native

【解决方案1】：

您不能有一个包含多列的水平 FlatList。这就是 React Native 的 documentation 所说的：

多列只能使用horizontal={false} 呈现，并且会像flexWrap 布局一样曲折。项目都应具有相同的高度 - 不支持砖石布局。

如果您希望 FlatList 处于水平状态，则应删除 numColumns=2，如果需要两列，则应将水平设置为 false。
  <FlatList
      numColumns={2}
      horizontal={false} 
      data={products}
      renderItem={({item}) => <ProductList 
      key={item.id}
      item={item}/>}
      keyExtractor={item => item.name}
               
  />

【讨论】：