React Nativeフレックスラップが反応しない

Question

フレックスしようとしていますが、何も問題はありません。すべてを試しましたが、まだラップしていません。

私はビューにラップされたタグ出力を持っており、すべての正しい設定があります。ここで

私の現在の結果

は私のコードです：

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を削除する必要があります。