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.

回答1:

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

回答2:

You can achieve this by simply doing something like:

        <View style={{flex:1, flexDirection:"row", maxHeight:100}}> 
            <View style={{flex : 1, backgroundColor:"red"}}/>
            <View style={{flex : 1, backgroundColor:"yellow"}}/>
       </View>

Then adding new views will let you achieve such a layout, then it's up to you deciding what and how many you want to render

来源：https://stackoverflow.com/questions/57856509/how-to-make-a-two-column-grid-on-react-native