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

Question

我使用 FlatList 来显示这样的图像：

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

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 答案，请将属性 columnWrapperStyle={{width:"50%}} 添加到 FlatList。也就是说，你给了多少列，将相应的宽度添加到道具中。

Answer 3

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

因为 renderItem 需要 return 中的 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 根据您的代码提供的示例零食

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

FlatList use numColumns shows Elements type is invalid

react-native

react-native-flatlist