React Native Flex Wrap funktioniert nicht

Question

Ich versuche, einige Tags zu wickeln, aber so gut wie nichts funktioniert, habe ich alles versucht und es immer noch nicht wickeln ist es möglich, dass React Native Probleme mit dem Wrapping hat?

Ich habe meine Tags-Ausgabe, die nur in einer Ansicht eingewickelt ist und es hat alle richtigen Einstellungen.

Mein aktuelles Ergebnis

Hier ist mein Code:

const isEmptyPhotoTags = _.isEmpty(photoTags); 
     let renderTags = []; 
     if(!isEmptyPhotoTags){ 
      photoTags[0].forEach(function(tag, i){ 
       renderTags.push(
        <View key={i} style={{flex:1, flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start', justifyContent: 'space-between', alignContent:'space-between', paddingLeft:15}}> 
         <View style={{height:52, width:146,padding:5,}}> 
         <TouchableHighlight style={styles.buttonTag}> 
          <Text style={styles.buttonTagText}>{tag}</Text> 
         </TouchableHighlight> 
         </View> 
        </View> 
       ) 
      }); 
     } 


<View style={styles.tagSection}> 
          <View style={{flex:1, flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start', justifyContent: 'flex-start'}}> 
           <Icon name='tag' size={29} type={"font-awesome"} color={'#58595B'} style={{paddingLeft:20, paddingRight:10,}}/> 
           <Text style={styles.tagSectionHeaderText}>Tags</Text> 
          </View> 
          <View style={{flex:1, flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start', justifyContent: 'space-between', alignContent:'space-between'}}> 
           {!isEmptyPhotoTags ? 
            <View style={{flex:1, flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start', alignContent:'space-between', justifyContent: 'space-between'}}>{renderTags}</View>: <Text style={styles.tagSectionNoTags}>No Tags</Text>} 
          </View> 
         </View> 



tagSection: { 
     flex: 1, 
     flexDirection: 'column', 
     backgroundColor:'#F7F8F9', 
     paddingTop:10, 
     flexWrap:'wrap', 
     alignItems: 'flex-start', 
     justifyContent: 'flex-start' 
    }, 
    tagSectionHeaderText:{ 
     fontSize: 21, 
     lineHeight: 22, 
     color: '#58595b', 
     fontWeight: '600', 
     paddingRight:10, 
    }, 
    tagSectionNoTags:{ 
     fontSize: 18, 
     lineHeight: 22, 
     color: '#58595b', 
     fontWeight: '400', 
     fontStyle:'italic', 
     paddingLeft:10, 
    }, 
    buttonTag: { 
     borderTopLeftRadius: 10, 
     borderTopRightRadius: 10, 
     borderBottomRightRadius: 10, 
     borderBottomLeftRadius: 10, 
     backgroundColor: '#6575BE', 
     flex:1, 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    buttonTagText: { 
     textAlign: 'center', 
     fontSize: 20, 
     lineHeight: 22, 
     color: '#fff', 
     fontWeight: '600', 

    }, 

Update-Code:

const isEmptyPhotoTags = _.isEmpty(photoTags); 
      let renderTags = []; 
      if(!isEmptyPhotoTags){ 
       photoTags[0].forEach(function(tag, i){ 
        renderTags.push(
         <View key={i} style={[styles.wrapTags, {paddingLeft:15}]}> 
          <View style={{height:52, width:146,padding:5,}}> 
          <TouchableHighlight style={styles.buttonTag}> 
           <Text style={styles.buttonTagText}>{tag}</Text> 
          </TouchableHighlight> 
          </View> 
         </View> 
        ) 
       }); 
      } 


<View style={styles.tagSection}> 
          <View style={{flex:1, flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start', justifyContent: 'flex-start'}}> 
           <Icon name='tag' size={29} type={"font-awesome"} color={'#58595B'} style={{paddingLeft:20, paddingRight:10,}}/> 
           <Text style={styles.tagSectionHeaderText}>Tags</Text> 
          </View> 
          <View style={styles.wrapTags}> 
           {!isEmptyPhotoTags ? 
            <View style={{ flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start', alignContent:'space-between', justifyContent: 'space-between', paddingBottom:10}}>{renderTags}</View>: <Text style={styles.tagSectionNoTags}>No Tags</Text>} 
          </View> 
         </View> 

tagSection: { 
     //flex: 1, 
     flexDirection: 'column', 
     backgroundColor:'#F7F8F9', 
     paddingTop:10, 
     flexWrap:'wrap', 
     alignItems: 'flex-start', 
     justifyContent: 'flex-start' 
    }, 
    tagSectionHeaderText:{ 
     fontSize: 21, 
     lineHeight: 22, 
     color: '#58595b', 
     fontWeight: '600', 
     paddingRight:10, 
    }, 
    tagSectionNoTags:{ 
     fontSize: 18, 
     lineHeight: 22, 
     color: '#58595b', 
     fontWeight: '400', 
     fontStyle:'italic', 
     paddingLeft:10, 
    }, 
    wrapTags:{ 
     flex:1, 
     flexDirection:'row', 
     flexWrap:'wrap', 
     alignItems: 'flex-start', 
     justifyContent: 'flex-start' 
    }, 
    buttonTag: { 
     borderTopLeftRadius: 10, 
     borderTopRightRadius: 10, 
     borderBottomRightRadius: 10, 
     borderBottomLeftRadius: 10, 
     backgroundColor: '#6575BE', 
     flex:1, 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    buttonTagText: { 
     textAlign: 'center', 
     fontSize: 20, 
     lineHeight: 22, 
     color: '#fff', 
     fontWeight: '600', 

    }, 

Answer 1

Sie sollen die flex: 1 entfernen Sie das Problem zu beheben.