react-native(리액트 네이티브) component - ListView_Grid

react-native(리액트 네이티브) component - ListView_Grid

import React, {Component} from 'react';

import {StyleSheet, View, Text, ListView, Dimensions, TouchableHighlight, Alert} from 'react-native';

const { height, width } = Dimensions.get("window");

export default class MyComponent extends Component {

constructor() {

super();

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

this.state = {

dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3',

'row 4', 'row 5', 'row 6', 'row 7', 'row 8', 'row 9', 'row 10', 'row 11']),

};

}

_onPressLearnMore = () => {

Alert.alert('this function is not defined')

}

render() {

return (

<ListView

contentContainerStyle={styles.list}

dataSource={this.state.dataSource}

renderRow={(rowData) =>

<TouchableHighlight

onPress={this._onPressLearnMore}

style={styles.row}

>

<Text>{rowData}</Text>

</TouchableHighlight>}

initialListSize={21}

pageSize={3}

scrollRenderAheadDistance={500}

/>

);

}

}

const ITEM_MARGIN = 3

const styles = StyleSheet.create({

separator: {

flex: 1,

height: StyleSheet.hairlineWidth*10,

backgroundColor: 'red',

},

list: {

//justifyContent: 'space-around',

flexDirection: 'row',

flexWrap: 'wrap',

alignItems: 'flex-start',

},

row: {

justifyContent: 'center',

padding: 5,

margin: ITEM_MARGIN,

width: width/3-ITEM_MARGIN*2,

height: height/3-ITEM_MARGIN*2,

backgroundColor: '#F6F6F6',

alignItems: 'center',

borderWidth: 1,

borderRadius: 5,

borderColor: '#CCC',

},

thumb: {

width: 64,

height: 64,

},

text: {

flex: 1,

marginTop: 5,

fontWeight: 'bold',

},

});