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

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

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']),

};

}

_onPressLearnMore = () => {

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

}

render() {

return (

<ListView

dataSource={this.state.dataSource}

renderRow={(rowData) =>

<TouchableHighlight

onPress={this._onPressLearnMore}

>

<Text>{rowData}</Text>

</TouchableHighlight>}

renderSeparator={(sectionId, rowId) =>

<View key={rowId} style={styles.separator} />

}

/>

);

}

}

const styles = StyleSheet.create({

separator: {

flex: 1,

height: StyleSheet.hairlineWidth*10,

width: width,

backgroundColor: 'red',

},

});