Flex Yerli Tepki - İçerik kenar

Question

ulaşır Ben flexDirection:'row' görüntülenen ancak benim tarz kabın içine simgeleri listesi varken flex ile sonraki satıra içerik mola Nasıl görünümün genişliğinden daha fazla simge olduğunda, onlar Bir sonraki hatta kırılma, ama sağa doğru devam et. Maksimum genişliğe ulaşırsa içeriği bir sonraki satıra bölmek için nasıl alabilirim?

Şekillendirme:

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> 

simgeler dibe kırmak yok sağa genişliğini ulaşmak

. Mümkün mü?

Answer 1

Eğer align-items belirtmezseniz Sen. Kapsayıcı tarzına

stretch dışındaki flexWrap: 'wrap' ve alignItems: flex-start (ya da bir şey ekleyebilir veya align-items: stretch ayarlarsanız, ilk satırdaki her sütun kadar yüksekliğe alacak mümkün aşağıdaki ekran görüntüsünde tür gibi aşağıdaki ikinci satır iterek: şimdi sağda