反應原生撓曲包裝不工作

我試圖撓曲包裝一些標籤，但幾乎沒有任何工作，我已經嘗試了一切，它仍然不包裝是否有可能，反應原生有包裝問題？反應原生撓曲包裝不工作

我有我的標籤輸出，它只是包裝在視圖中，它具有所有正確的設置。

我現在的結果

這裏是我的代碼：

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

    },

來源

2017-09-05 Almog Koren

您應該刪除flex: 1來解決這個問題。

來源

2017-09-05 04:30:30

如果你沒有設置flexDirection，這是沒有意義的：'行'默認是堆棧項目的列，我試圖讓他們打破下一行 –

刪除'flex：1'我認爲它幫助。 –

其實，這並沒有工作，它沒有突破新線 –

反應原生撓曲包裝不工作

回答

相關問題