Flex React Native — Wie der content Pause zur nächsten Zeile mit flex, wenn Sie Inhalte an edge
Habe ich eine Liste von icons in meinem Stil container, die angezeigt werden, in eine flexDirection:'row'
aber wenn es mehr icons, als die Breite der Ansicht, dass Sie nicht brechen zur nächsten Zeile, sondern weiter nach rechts aus der Ansicht. Wie bekomme ich den Inhalt zu brechen in die nächste Zeile, wenn es erreicht max Breite?
Styling:
var styles = StyleSheet.create({
container: {
width: SCREEN_WIDTH, //width of screen
flexDirection:'row',
backgroundColor: 'transparent',
marginTop:40,
paddingLeft:10,
paddingRight:10,
flex: 1,
},
iconText:{
paddingLeft:10,
paddingRight:10,
paddingTop:10,
paddingBottom:10
},
});
Render:
<View style={styles.container}>
<TouchableHighlight
onPress={() => this.changeIcon(indexToChange, icons[0])}
underlayColor='#F7F7F7'>
<Text style={styles.iconText}><IonIcons name={icons[0]} size={30} color="#555" /></Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => this.changeIcon(indexToChange, icons[1])}
underlayColor='#F7F7F7'>
<Text style={styles.iconText}><IonIcons name={icons[1]} size={30} color="#555" /></Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => this.changeIcon(indexToChange, icons[2])}
underlayColor='#F7F7F7'>
<Text style={styles.iconText}><IonIcons name={icons[2]} size={30} color="#555" /></Text>
</TouchableHighlight>
...//more continued on
</View>
Wenn die Symbole erreichen Sie die Breite auf der rechten, dass Sie nicht brechen den Boden. Ist das möglich?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie hinzufügen
flexWrap: 'wrap'
undalignItems: flex-start
(oder etwas anderes alsstretch
zu Ihrem container-Stil.Wenn Sie nicht angeben
align-items
oder wenn Siealign-items: stretch
jede Spalte in der ersten Zeile wird so viel Höhe wie möglich, drücken Sie die zweite Zeile unterhalb der Art, wie in der Abbildung unten:align-items: flex-start
zum Beispiel und es sollte funktionieren wie Sie es wollen. Ich bearbeitet meine Antwort.