为什么我的 React Native flex wrap 不起作用？

Question

我正在尝试对一些标签进行 flex 包装，但几乎没有任何效果，我已经尝试了所有方法，但仍然无法包装 React Native 是否有包装问题？

我有我的标签输出，它只是包装在一个视图中，它具有所有正确的设置。

我目前的结果

这是我的代码：

 <View
style={{
    width: responsiveWidth(18),
    height: responsiveHeight(3.5),
    borderRadius: 10,
    backgroundColor: "#ffe8e8",
    alignItems: "center",
    justifyContent: "center",
    marginLeft: responsiveWidth(8)
}}
>
<Text
    style={{
        color: "#000",
        fontSize: responsiveFontSize(1.5),
        fontFamily: "Iransans"
    }}
>
    8:00 AM
</Text>
</View>;

for (var i = 1; i < times.length / 4; i++) {
//i shomarandeye radif
for (var j = 1; j % 4 == 0; j++) {
    //j shomarandeye sheyaaye darune radif
}
}

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 来解决问题。

Answer 2

查看你的视图组件的宽度你会明白那里发生了什么

Answer 3

当我在父 flex 组件中定义时，我遇到了同样的问题 flexWrap 不起作用：1。 现在我改变了它，它可以工作了。

<View style={{ flexDirection: 'row' }}>
    <Text style={{ flex: 1, flexWrap: 'wrap' }}></Text>
</View>