React 네이티브 플렉스 랩이 작동하지 않습니다.

Question

플렉스를하려고하는데 거의 모든 것이 작동하지 않습니다. 모든 것을 시도했지만 아직 랩하지 않았기 때문에 React Native가 랩핑에 문제가 있습니까?

내 태그 출력이보기로 감겨져 있고 모든 올바른 설정이 있습니다.

나의 현재 결과

여기 내 코드입니다 :

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

    }, 

업데이트 코드 :

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

당신은 문제를 해결하기 위해 flex: 1을 제거해야합니다가.