Question

我正在尝试为ListView设置一行，问题是消息部分不断溢出，文本似乎落在右手元素后面。有什么方法可以阻止它流到后面？感谢

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,
    }
});

Answer 1

您需要在内容包装器视图（documentation）之外移动您的头像视图：

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

文本溢出Flex与React Native

1 个答案: