Reactjs 文本溢出Flex与React Native

我试图为ListView设置一行，问题是消息部分一直溢出，文本似乎位于右侧元素的后面。有没有办法阻止它流淌？谢谢

返回(
this.pressRow（）}>
霍莉·海斯
嗨，马特！你今晚想在快乐时光见面吗？我会。。。
37分钟
);
var styles=StyleSheet.create({
包装器：{
背景颜色：“f6f6f6”，
高度：（屏幕高度-40），
},
导航包装器：{
身高：40，
背景颜色：“fff”，
},
messageWrapper：{
填充：20，
背景颜色：“fff”，
边缘左：10，
marginRight:10，
玛金托普：10，
//justifyContent:'之间的空间'，
flexDirection:“行”，
弹性：1，
},
列表包装器：{
填充底部：10，
},
信息右侧：{
//justifyContent:'之间的空间'，
//对齐项目：“柔性端”，
弹性系数：0.2，
背景颜色：“绿色”，
},
会议记录：{
颜色：“1D26”，
尺寸：12，
fontFamily：“Avenir书”，
marginBottom:10，
},
messageContentWrapper：{
背景颜色：“蓝色”，
flexDirection:“行”，
弹性系数：0.8，
},
说唱歌手：{
溢出：“隐藏”，
边界半径：25，
},
messageTextWrapper：{
边缘左：10，
},
消息名称：{
尺寸：14，
fontFamily：“Avenir重型”，
},
messageText:{
颜色：“919191”，
fontFamily：“Avenir Light”，
尺寸：12，
}
});

您需要将您的化身视图移到内容包装视图（）之外：

this.pressRow（）}>
霍莉·海斯
嗨，马特！你今晚想在快乐时光见面吗？我会的。。。
37分钟

return (
        <TouchableOpacity onPress={() => this.pressRow()}>
            <View style={styles.messageWrapper}>
                <View style={styles.messageContentWrapper}>
                    <View style={styles.avatarWrapper} >
                        <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 50, height: 50}}/>
                    </View>
                    <View style={styles.messageTextWrapper} >
                        <Text style={styles.messageName}>Holly Hayes</Text>
                        <Text style={styles.messageText}>Hi Matt! Do you want to meet for happy hour tonight? I will...</Text>
                    </View>
                </View>
                <View style={styles.messageRightSide}>
                    <Text style={styles.minutes}>37 Min</Text>
                    <Image source={require('../../images/icons/IconArrowRight.png')} style={{width: 20, height: 20}}/>
                </View>
            </View>
        </TouchableOpacity>
    );

var styles = StyleSheet.create({
    wrapper: {
        backgroundColor: "#f6f6f6",
        height: (screenHeight - 40),
    },
    navWrapper: {
        height: 40,
        backgroundColor: "#fff",
    },
    messageWrapper: {
        padding: 20,
        backgroundColor: "#fff",
        marginLeft: 10,
        marginRight: 10,
        marginTop: 10,
        //justifyContent: 'space-between',
        flexDirection: "row",
        flex: 1,
    },
    listWrapper: {
        paddingBottom: 10,
    },
    messageRightSide: {
        //justifyContent: 'space-between',
        //alignItems: 'flex-end',
        flex: 0.2,
        backgroundColor: "green",
    },
    minutes: {
        color: "#1d1d26",
        fontSize: 12,
        fontFamily: "Avenir-Book",
        marginBottom: 10,
    },
    messageContentWrapper: {
        backgroundColor: "blue",
        flexDirection: "row",
        flex: 0.8,
    },
    avatarWrapper: {
        overflow: "hidden",
        borderRadius: 25,
    },
    messageTextWrapper: {
        marginLeft: 10,
    },
    messageName: {
        fontSize: 14,
        fontFamily: "Avenir-Heavy",
    },
    messageText: {
        color: "#919191",
        fontFamily: "Avenir-Light",
        fontSize: 12,
    }
});

<TouchableOpacity onPress={() => this.pressRow()}>
    <View style={styles.messageWrapper}>
        <View style={styles.avatarWrapper} >
            <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 50, height: 50}}/>
        </View>
        <View style={styles.messageContentWrapper}>
            <View style={styles.messageTextWrapper} >
                <Text style={styles.messageName}>Holly Hayes</Text>
                <Text style={styles.messageText}>Hi Matt! Do you want to meet for happy hour tonight? I will...</Text>
            </View>
        </View>
        <View style={styles.messageRightSide}>
            <Text style={styles.minutes}>37 Min</Text>
            <Image source={require('../../images/icons/IconArrowRight.png')} style={{width: 20, height: 20}}/>
        </View>
    </View>
</TouchableOpacity>