Flex React Native - Comment faire passer le contenu à la ligne suivante avec flex lorsque le contenu atteint le bord

Question

J'ai une liste d'icônes à l'intérieur de mon conteneur de style qui sont affichées dans un flexDirection:'row' mais lorsqu'il y a plus d'icônes que de largeur de vue, elles ne sautent pas à la ligne suivante, mais continuent à droite hors de vue. Comment obtenir le contenu pour passer à la ligne suivante s'il atteint la largeur maximale?

Coiffant:

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

Rendre:

<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>

Lorsque les icônes atteignent la largeur à droite, elles ne se cassent pas vers le bas. Est-ce possible?

Answer 1

Vous pouvez ajouter flexWrap: 'wrap' et alignItems: flex-start (ou autre chose que stretch à votre style de conteneur.

Si vous ne spécifiez pas align-items ou si vous définissez align-items: stretch, chaque colonne de la première ligne prendra autant de hauteur que possible, en poussant la deuxième ligne ci-dessous un peu comme dans la capture d'écran ci-dessous: