kylefang/react-native-super-grid
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-super-grid.git synced 2026-01-12 17:42:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix SectionGrid example

Browse Source
This commit is contained in:
Saleel S
2019-01-20 00:36:38 +04:00
parent f61fb874e8
commit fe4a32be3b
1 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
README.md
View File

@@ -179,34 +179,63 @@ const styles = StyleSheet.create({
```javascript
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
import { SectionGrid } from 'react-native-super-grid';
export default class Example extends Component {
render() {
const items = [
{ name: 'TURQUOISE', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
{ name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
{ name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
{ name: 'NEPHRITIS', code: '#27ae60' }, { name: 'BELIZE HOLE', code: '#2980b9' },
{ name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
{ name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
{ name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
{ name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
{ name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
{ name: 'SILVER', code: '#bdc3c7' }, { name: 'ASBESTOS', code: '#7f8c8d' },
{ name: 'TURQUOISE', code: '#1abc9c' },
{ name: 'EMERALD', code: '#2ecc71' },
{ name: 'PETER RIVER', code: '#3498db' },
{ name: 'AMETHYST', code: '#9b59b6' },
{ name: 'WET ASPHALT', code: '#34495e' },
{ name: 'GREEN SEA', code: '#16a085' },
{ name: 'NEPHRITIS', code: '#27ae60' },
{ name: 'BELIZE HOLE', code: '#2980b9' },
{ name: 'WISTERIA', code: '#8e44ad' },
{ name: 'MIDNIGHT BLUE', code: '#2c3e50' },
{ name: 'SUN FLOWER', code: '#f1c40f' },
{ name: 'CARROT', code: '#e67e22' },
{ name: 'ALIZARIN', code: '#e74c3c' },
{ name: 'CLOUDS', code: '#ecf0f1' },
{ name: 'CONCRETE', code: '#95a5a6' },
{ name: 'ORANGE', code: '#f39c12' },
{ name: 'PUMPKIN', code: '#d35400' },
{ name: 'POMEGRANATE', code: '#c0392b' },
{ name: 'SILVER', code: '#bdc3c7' },
{ name: 'ASBESTOS', code: '#7f8c8d' },
];
return (
<FlatGrid
itemDimension={130}
items={items}
<SectionGrid
itemDimension={90}
// staticDimension={300}
// fixed
// spacing={20}
sections={[
{
title: 'Title1',
data: items.slice(0, 6),
},
{
title: 'Title2',
data: items.slice(6, 12),
},
{
title: 'Title3',
data: items.slice(12, 20),
},
]}
style={styles.gridView}
renderItem={({ item }) => (
renderItem={({ item, section, index }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
renderSectionHeader={({ section }) => (
<Text style={styles.sectionHeader}>{section.title}</Text>
)}
/>
);
}
@@ -233,8 +262,16 @@ const styles = StyleSheet.create({
fontSize: 12,
color: '#fff',
},
sectionHeader: {
flex: 1,
fontSize: 15,
fontWeight: '600',
alignItems: 'center',
backgroundColor: '#636e72',
color: 'white',
padding: 10,
},
});
```
| ![iPhone SectionGrid Portrait](/screenshots/iphone_section_grid_portrait.png?raw=true "iPhone SectionGrid Portrait")| ![iPhone6 Landscape](/screenshots/iphone_section_grid_landscape.png?raw=true "iPhone6 Landscape") |
|:---:|:---:|