react-native-flex-grid-view

简单的 react native 布局。

Easy Grid View for React Native.

Installation

npm install react-native-flex-grid-view

example

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

<GridView
  data={[
    '#1abc9c', '#3498db', '#34495e', '#16a085', '#27ae60', '#2980b9',
    '#8e44ad', '#2c3e50', '#e67e22', '#e74c3c', '#ecf0f1', '#95a5a6',
    '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d', '#27ae60',
    '#1abc9c', '#3498db', '#34495e', '#16a085', '#27ae60', '#2980b9',
    '#8e44ad', '#2c3e50', '#e67e22', '#e74c3c', '#ecf0f1', '#95a5a6',
    '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d', '#27ae60',
  ]}
  span={4}
  border={1}
  borderColor="white"
  spacing={0}
  square
  flat
  render={item => <View style={{ backgroundColor: item, flex: 1 }} />}
/>

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)