FlatList使用numColumns显示元素类型无效

Question

我使用FlatList来显示如下图像：

但是当我在numColumns={2}中添加FlatList时，它会显示错误：

Element type is invalid

奇怪的是，如果我使用numColumns={1}

，则没有错误

我无法理解。任何人都可以给我一些建议吗？提前谢谢。

这是我使用我的FlatList代码

import {
  View,
  Text,
  StatusBar,
  FlatList,
  Image,
  Dimensions
} from "react-native";

const { width, height } = Dimensions.get("window");
const equalWidth = width / 2;

class MainActivity extends Component {
  renderItem = ({ item }) => {
    return item.map(value => {
      return (
        <View>
          <Image
            style={{ height: 150, width: equalWidth }}
            source={{ uri: value.photoHref }}
            resizeMode="cover"
          />
        </View>
      );
    });
  };

  render() {
    return (
      <FlatList
        data={movieData}
        renderItem={this.renderItem}
        horizontal={false}
        keyExtractor={(item, index) => index}
        numColumns={2}
      />
    );
  }
}

Answer 1

尝试使用View包装您的组件数组：

renderItem = ({ item }) => (
  <View>
    {item.map((value) => (
      <View>
        <Image
          style={{ height: 150, width: equalWidth }}
          source={{ uri: value.photoHref }}
          resizeMode="cover"
        />
      </View>
    ))}
  </View>
);

Answer 2

添加@riwu答案，请将prop columnWrapperStyle={{width:"50%}}添加到FlatList。即你给多少列添加相应的宽度到支柱。

Answer 3

您无需向width图像添加显式Flatlist，只需向父包装提供flex即可。

由于renderItem期望返回中的React.Element，因此您可以

renderItem = ({item}) => (
       <View style={{flex: 1, height: 150, margin: 5}}> <== Adding margin(Optional), width will be automatically scaled
           item.map(value => (
             <Image
                style={{flex: 1}}
                source={{ uri: value.photoHref }}
                resizeMode="cover"
             />
           ))
       </View>
   )

Here's您的代码中的小吃样品