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

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

import React, { Component } from "react";

import { StyleSheet, FlatList, Text, View, Alert, Dimensions } from "react-native";

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

export default class FlatListExample extends Component {

constructor(props) {

super(props);

this.state = {

FlatListItems: [

{ itemNum: "001", name: "Skptricks", studyPeriod: "3 year" },

{ itemNum: "002", name: "Sumit", studyPeriod: "3 year" },

{ itemNum: "003", name: "Amit", studyPeriod: "3 year" },

{ itemNum: "004", name: "React", studyPeriod: "3 year" },

{ itemNum: "005", name: "React Native", studyPeriod: "3 year" },

{ itemNum: "006", name: "Java", studyPeriod: "3 year" },

{ itemNum: "007", name: "Javascript", studyPeriod: "3 year" },

{ itemNum: "008", name: "PHP", studyPeriod: "3 year" },

{ itemNum: "009", name: "AJAX", studyPeriod: "3 year" },

{ itemNum: "010", name: "Android", studyPeriod: "3 year" },

{ itemNum: "011", name: "Selenium", studyPeriod: "3 year" },

{ itemNum: "012", name: "HTML", studyPeriod: "3 year" },

{ itemNum: "013", name: "Database", studyPeriod: "3 year" },

{ itemNum: "014", name: "MYSQL", studyPeriod: "3 year" },

{ itemNum: "015", name: "SQLLite", studyPeriod: "3 year" },

{ itemNum: "016", name: "Web Technology", studyPeriod: "3 year" },

{ itemNum: "017", name: "CSS", studyPeriod: "3 year" },

{ itemNum: "018", name: "Python", studyPeriod: "3 year" },

{ itemNum: "019", name: "Linux", studyPeriod: "3 year" },

{ itemNum: "020", name: "Kotlin", studyPeriod: "3 year" },

]

};

}

FlatListItemSeparator = () => {

return (

<View style={{ height: 5, width: "100%", backgroundColor: "green" }} />

);

};

GetItem = (n) => {

Alert.alert(n);

};

// GetItem(item) {

// Alert.alert(item);

// }

_keyExtractor = (item) => item.itemNum;

render() {

return (

<View style={styles.container}>

<FlatList

keyExtractor={this._keyExtractor}

data={ this.state.FlatListItems }

ItemSeparatorComponent = {this.FlatListItemSeparator}

renderItem={({item}) =>

<View>

<Text style={styles.item} onPress={() => this.GetItem(item.name)} >{item.name}</Text>

<Text style={styles.item} onPress={() => this.GetItem(item.name)} >Study-Period: {item.studyPeriod}</Text>

</View>}

// renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>

numColumns={2}

/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: "center",

backgroundColor: "#e5e5e5"

},

headerText: {

fontSize: 20,

textAlign: "center",

margin: 10,

fontWeight: "bold"

},

item: {

padding: 10,

fontSize: 20,

height: height/18,

width: width/2,

textAlignVertical: 'center'

},

});