How to make a two column grid on react native?

邮差的信 提交于 2021-02-11 15:11:21

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!