फ्लेक्स प्रतिक्रिया मूल - सामग्री बढ़ने पर फ्लेक्स के साथ अगली पंक्ति में सामग्री ब्रेक कैसे करें

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

अपने कंटेनर शैली के लिए stretch के अलावा अन्य flexWrap: 'wrap' और alignItems: flex-start (या कुछ भी जोड़ सकते हैं।

आप align-items निर्दिष्ट नहीं करते हैं या यदि आप align-items: stretch निर्धारित करते हैं, पहली पंक्ति में प्रत्येक स्तंभ के रूप में के रूप में ज्यादा ऊंचाई पर ले जाएगा संभव, दूसरी पंक्ति नीचे नीचे स्क्रीनशॉट में एक तरह से की तरह धक्का: अब सही पर