https://github.com/luckcoding/react-native-flex-grid-view

react native grid view layout.
https://github.com/luckcoding/react-native-flex-grid-view

gird react-native react-native-component

Last synced: about 11 hours ago
JSON representation

react native grid view layout.

• Host: GitHub
• URL: https://github.com/luckcoding/react-native-flex-grid-view
• Owner: luckcoding
• Created: 2017-09-26T03:59:22.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-28T09:40:18.000Z (almost 7 years ago)
• Last Synced: 2024-09-26T22:07:17.124Z (about 1 month ago)
• Topics: gird, react-native, react-native-component
• Language: JavaScript
• Homepage:
• Size: 119 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-flex-grid-view

[![npm version](https://img.shields.io/npm/v/react-native-flex-grid-view.svg)](https://www.npmjs.com/package/react-native-flex-grid-view)

简单的 react native 布局。

Easy Grid View for React Native.

![screenshot](screenshot1.png)

![screenshot](screenshot2.png)

![screenshot](screenshot3.png)

## Installation

```

npm install react-native-flex-grid-view

```

## example

```

import GridView from 'react-native-flex-grid-view'

 }

/>

```

## API

| Property | Type | Default Value | Description |

|:----:|:----:|:----:|:----:|

|data|Array|[]|将要被渲染的数据(Items to be rendered)|

|span|Number|1|每行的个数(each row num)

|render|Function|() => {}|传入data内每个对象，返回组件(render each object in data, return a component)|

|spacing|Number|0|间距(Spacing between each item)|

|border|Number|0|边宽(border width)|

|borderColor|String|'black'|边框的颜色(border color)|

|square|Boolean|false|是否保持正方形(true: is a square)|

|flat|Boolean|true|是否采用 **FlatList** 或着 纯粹布局(true: use **FlatList**, false: only View Grid)