Menu
React Native – FlastList
import React, { Component } from "react";
import { Platform, StyleSheet, FlatList, Text, View, Alert } from "react-native";
export default class MainActivity extends Component {
constructor(props) {
super(props);
this.state = {
FlatListItems: [
{ key: "1" },
{ key: "2" },
{ key: "3" },
{ key: "4" },
{ key: "5" },
{ key: "6" },
{ key: "7" },
{ key: "8" },
{ key: "9" },
{ key: "10" },
{ key: "11" },
{ key: "12" },
{ key: "13" },
{ key: "14" },
{ key: "15" },
{ key: "16" },
{ key: "17" },
{ key: "18" },
{ key: "19" },
{ key: "20" },
]
};
}
FlatListItemSeparator = () => {
return (
<View style={{ height: 2, width: "100%", backgroundColor: "#000000" }} />
);
};
DisplayItem(item) {
Alert.alert(item);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item} onPress={this.DisplayItem.bind(this, item.key)} > {item.key} </Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#f2f2f2"
},
item: {
padding: 8,
fontSize: 25,
height: 50,
}
});
Output
