Question

我有两行，第一行包含图像，第二行包含文本。因此，当我使用flexDirection：'row'时，文本溢出，宽度和省略号不显示。请查看我的代码。

<View style={styles.boxContainer}>
    <View style={{marginRight: 10}}>
        <Text style={{textAlign: 'left'}}>
            <Image
                style={styles.eventImg}
                source={{uri: item.image}}
            />
        </Text>
    </View>
    <View>
        <Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
        <Text style={{fontSize: 12, color: '#878787'}}>{item.formatted_date}</Text>
        <Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}</Text>
        <View style={{flexDirection: 'row'}}>
            <TouchableOpacity
                onPress={() =>
                    this.onPressReadMore(item.id)
                }
            >
                <Text style={{fontSize: 12, padding: 5, backgroundColor: '#76ac42', color: '#ffffff', borderRadius: 3, textAlign: 'center', marginTop: 10, width: 80}}>Read More</Text>
            </TouchableOpacity>
            <Text style={{alignSelf: 'center', textAlign: 'right'}}>Registered</Text>
        </View>
    </View>
</View>

样式

const styles = StyleSheet.create({
container: {
    backgroundColor: '#ffffff'
},
tabContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10
},
tabSingle: {
    flex: 1,
    marginBottom: 5
},
titleText: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'left',
    paddingTop: 20,
    paddingLeft: 20,
    paddingRight: 20
},
boxContainer: {
    backgroundColor: '#f6f6f6',
    padding: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row',
    borderRadius: 5
},
eventImg: {
    width: 80,
    height: 80,
    resizeMode: 'cover',
    borderRadius: 5
}
});

哪里出问题了。我已经尝试了很多文章，但似乎都没有。有没有什么办法解决这一问题。请看一下设计，

Answer 1

尝试以下代码：

<View style={{flexDirection:'row'}}>
    <Text style={{fontSize: 10, flex: 1, flexWrap: 'wrap', flexShrink: 1}} ellipsizeMode='tail'>
        {item.descr}
    </Text>
</View>

Answer 2

在View中设置水平值，其中包含省略号。

 <View style={{width: 200}} >
       ....
        <Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}
</Text>

这是我简化过的word-for-word abbreviation的示例。

Flex方向行项目溢出如何解决此问题？

2 个答案: