2 Elemente pro Zeile anzeigen [native reagieren]
Ich lerne reagiere nativ und in allen Tutorials, die ich sehe, wurde ListView mit nur 1 Elementen pro Zeile verwendet. Ich habe ListView jedoch nicht verwendet. Ich habe nur 6 Elemente, die als flaches Raster mit 2 Elementen pro Zeile angezeigt werden müssen, und sollte reagieren. Ich weiß, dass es eine grundlegende Frage ist, aber ich habe es auch von meiner Seite aus versucht, was auf dem Bild zu sehen ist
Das ist mein Code
renderDeviceEventList() {
return _.map(this.props.deviceEventOptions, deviceEventOption => (
<View key={deviceEventOption.id}>
<Icon
name={deviceEventOption.icon_name}
color="#ddd"
size={30}
onPress={() =>
this.props.selectDeviceEvent(deviceEventOption)
}
/>
<Text style={{ color: "#ff4c4c" }}>
{deviceEventOption.icon_name}
</Text>
</View>
));
}
render() {
return (
<View
style={{
flex: 1,
top: 60,
flexDirection: "row",
justifyContent: "space-around",
flexWrap: "wrap",
marginBottom: 10
}}
>
{this.renderDeviceEventList()}
</View>
);
}