Flex Reactive Native - Wie Inhalte zum nächsten Zeile mit Flex brechen, wenn Inhalt Rand erreicht

Question

Ich habe eine Liste von Symbolen in meinem gestylten Container, die in einem flexDirection:'row' angezeigt werden, aber wenn es mehr Symbole als die Breite der Ansicht gibt brechen Sie nicht zur nächsten Zeile auf, sondern fahren Sie nach rechts weiter. Wie bringe ich den Inhalt in die nächste Zeile, wenn er die maximale Breite erreicht?

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 die Breite auf der rechten Seite sie auf den Boden brechen nicht. Ist das möglich?

Answer 1

können Sie fügen flexWrap: 'wrap' und alignItems: flex-start (oder etwas anderes als stretch zu Ihrem Container-Stil.

Wenn Sie nicht align-items angeben oder wenn Sie align-items: stretch gesetzt, jede Spalte in der ersten Reihe wird so viel Höhe nehmen, wie möglich, wie unten Art der zweiten Reihe schieben in der Abbildung unten: