我尝试将文本 Package 在<Text>
(红色背景)中,但没有成功。我尝试使用flexWrap: wrap
。组件代码(功能组件)和样式(在styles
常量中的剪切结束处)见下文。
import { Text, View, Image, StyleSheet } from "react-native";
const ChatListItem = () => {
return (
<View style={styles.container}>
<Image
source={{
uri: "https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/lukas.jpeg",
}}
style={styles.image}
/>
<View style={styles.content}>
<View style={styles.row}>
<Text style={styles.name}>lukas</Text>
<Text style={styles.time}>4:00</Text>
</View>
<Text style={styles.subTitle}>
abideabide abideabide abideabide abideabide abideabide abideabide
abideabide abideabide abideabide abideabide abideabide
abideabideabideabid
</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
marginHorizontal: 20,
marginVertical: 10,
height: 70,
},
image: {
width: 60,
height: 60,
borderRadius: 30,
marginRight: 15,
},
content: {
flex: 1,
},
row: {
flexDirection: "row",
marginBottom: 5,
},
name: {
flex: 1,
fontWeight: "bold",
},
time: {
color: "gray",
},
subTitle: {
backgroundColor: "red",
flexWrap: "wrap",
},
});
export default ChatListItem;
谢谢您对以上问题的帮助。
2条答案
按热度按时间uwopmtnx1#
当您说文本不换行时,它看起来像什么?也许
subTitle
组件需要定义一个固定的宽度,例如width: 100
2hh7jdfx2#
添加flexShrink:1并从样式中移除height属性,则生成了可接受的结果。