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>
    );
}

Antworten auf die Frage(10)

Ihre Antwort auf die Frage