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?

InformationsquelleAutor Chipe | 2016-01-09
Schreibe einen Kommentar