Flex React Native - コンテンツが端に達するとコンテンツが次の行にフレックスで移動する方法

Question

自分のスタイルのコンテナ内にアイコンリストを表示します。これはflexDirection:'row'に表示されますが、次の行には行かないでくださいが、表示されていない行はそのまま続けます。最大幅に達すると、コンテンツを次の行に分割する方法を教えてください。

スタイリング：

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

がレンダリング：

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

アイコンは、彼らが下に破るいけない右の幅に達する

。これは可能ですか？

Answer 1

あなたがalign-itemsを指定しない場合あなたは。あなたのコンテナスタイルに

をstretch以外flexWrap: 'wrap'とalignItems: flex-start（または何かを追加することができたり、align-items: stretchを設定した場合、最初の行の各列は同じくらいの高さになります可能な限り、以下のスクリーンショットのようなもののように下の2番目の行をプッシュ：今すぐ右側に