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)