Menu
React Native – Grid Layout
import React, { Component } from 'react';
import {StyleSheet, FlatList, Text, View, Alert } from 'react-native';
export default class Dialphone extends Component {
constructor(props) {
super(props);
this.state = {
GridListItems: [
{ key: "1" },
{ key: "2" },
{ key: "3" },
{ key: "4" },
{ key: "5" },
{ key: "6" },
{ key: "7" },
{ key: "8" },
{ key: "9" },
{ key: "+" },
{ key: "0" },
{ key: "x" },
]
};
}
GetItem(item) {
Alert.alert(item);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={ this.state.GridListItems }
renderItem={ ({item}) =>
<View style={styles.GridContainer}>
<Text style={styles.GridTextLayout} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>
</View> }
numColumns={3}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#e5e5e5",
margin:1
},
GridContainer: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
height: 50,
margin: 5,
backgroundColor: '#0066ff'
},
GridTextLayout: {
fontSize: 20,
fontWeight: 'bold',
justifyContent: 'center',
color: '#fff',
padding: 10,
}
});
