Natywny reaktywny język Flex - sposób podziału treści na kolejną linię z flexem, gdy zawartość osiąga krawędź

Question

Mam listę ikon wewnątrz mojego stylizowanego kontenera, które są wyświetlane w flexDirection:'row', ale gdy jest więcej ikon niż szerokość widoku, nie przerywaj do następnej linii, ale kontynuuj po prawej stronie z widoku. Jak mogę przekonwertować zawartość na następny wiersz, jeśli osiągnie maksymalną szerokość?

Stylizacja:

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> 

Kiedy ikony osiągnąć szerokość w prawo dont przełamać do dołu. czy to możliwe?

Answer 1

Możesz dodać flexWrap: 'wrap' i alignItems: flex-start (lub coś innego niż stretch do stylu kontenera.

Jeśli nie określisz align-items lub jeśli ustawisz align-items: stretch każda kolumna w pierwszym rzędzie zajmie tyle wysokość jak możliwe, przesuwając drugi wiersz poniżej trochę jak na poniższym zrzucie ekranu: