0.2.0 • Published 6 years ago
react-native-flowable-gridview v0.2.0
react-native-flowable-gridview
A flowable view container, based on View component. Auto layout with different screen sizes.
It does't reuse cell views. if your data is large, it will be poor efficiency. Using FlatList or List component instead.
Example
Installation
npm install --save react-native-flowable-gridview
Usage
import FlowableGridView from 'react-native-flowable-gridview';
render() {
const datas = Array(10).fill('').map((_,i) => ({key: i, text: `item #${i}`}));
return (
<FlowableGridView
style={{flex: 1}}
dataSource={datas}
itemWidth={60}
columnSpace={20}
rowSpace={10}
keyExtractor={(data, index) => data.key}
renderItem={(data, index)=>
<View style={styles.item}>
<Text>{data.text}</Text>
</View>
}
/>
}
Properties
Name | Type | isRequired | Default Value | Notes |
---|---|---|---|---|
dataSource | Array | Yes | ||
itemWidth | Number | Yes | ||
columnSpace | Number | No | 0 | It is not real column space, but minimum value |
rowSpace | Number | No | 0 | |
keyExtractor | Function: (data, index) => Object | No | return data index of dataSource | |
renderItem | Function: (data, index) => Component | Yes |