如何在本机反应上制作两列网格? [英] How to make a two column grid on react native?

问题描述

我现在的任务是制作一个屏幕，在两列网格中提供选项，其中包含多个卡片作为列表项.(你可以看到

I am tasked right now with making a screen that gives options in a grid of two columns with multiple cards as the items of a list. (You can see here)

I was trying to create a row flexbox, but it ended up simply continuing horizontally forever.

I'd like to know what would be a good way to get this effect os two columns expanding downwards.

解决方案

You should use FlatList and set numColumns prop to "2" to show FlatList as grid

Here is complete code sample

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>
    );
  }
}

App Preview

这篇关于如何在本机反应上制作两列网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！