如何在本机反应上制作两列网格？

Question

我现在的任务是制作一个屏幕，该屏幕在包含多张卡片的两列网格中提供选项作为列表的项目。（你可以在这里看到）

我试图创建一个行 flexbox，但它最终只是永远水平地继续。

我想知道什么是使两列向下扩展的效果的好方法。

Answer 1

您应该使用FlatList并将numColumns属性设置 为“2”以将 FlatList 显示为网格

这是完整的代码示例

import React from "react";
import { SafeAreaView, FlatList, Text, View, Image } from "react-native";

const DATA = [
  {
    id: "1",
    title: "RUSTY DRIVE",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "2",
    title: "SABOR MORENO",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "3",
    title: "0 MESTRE PUB",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "4",
    title: "GRILL 54 CHEF",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "5",
    title: "RUSTY DRIVE",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "6",
    title: "SABOR MORENO",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "7",
    title: "0 MESTRE PUB",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  },
  {
    id: "8",
    title: "GRILL 54 CHEF",
    image:
      "https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
  }
];

export default class App extends React.Component {
  _renderItem = ({ item }) => (
    <View style={{ flex: 1, marginHorizontal: 20, marginBottom: 20 }}>
      <Image
        style={{ width: "100%", height: 140 }}
        source={{ uri: item.image }}
      />
      <Text style={{ textAlign: "center", marginTop: 8 }}>{item.title}</Text>
    </View>
  );

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <FlatList
          data={DATA}
          renderItem={this._renderItem}
          keyExtractor={item => item.id}
          numColumns={2}
          style={{ flex: 1 }}
          contentContainerStyle={{ paddingVertical: 20 }}
        />
      </SafeAreaView>
    );
  }
}

应用预览