[英]How to make a view height fit the content inside in react native?
我正在構建一個移動聊天應用程序,我遇到了這個問題,我將消息顯示為視圖內的文本,但顯然我無法使消息顯示在適合視圖內的特定高度。 要么是消息太長,無法完整顯示(視圖中沒有足夠的空間),要么是消息出現了,但文本后面有很多空格。
請查看准確描述問題的圖像:
這是我的代碼:
1- 意見:
if (chat.from !== CurrentUser) {
temp_chat.push(
<View key={i} style={styles.messageContainer1}>
<View style={styles.thisUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
<View style={styles.empty}></View>
</View>
);
} else {
temp_chat.push(
<View key={i} style={styles.messageContainer2}>
<View style={styles.empty}></View>
<View style={styles.otherUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
</View>
);
}
2-風格:
messageContainer1: {
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
messageContainer2: {
flexDirection: "row",
justifyContent: "flex-end",
marginBottom: 10,
flex: 1,
},
message: {
fontSize: 16,
color:"#fff",
padding:10
},
empty: {
flex: 1,
},
thisUserText: {
backgroundColor: "#bf0010", // red
flex: 1,
height: 100,
borderRadius: 5,
color:"#fff",
},
otherUserText: {
backgroundColor: "#13283E", // dark blue
flex: 2,
height: 100,
borderRadius: 5,
},
我需要的是紅色和深藍色視圖的動態高度,使里面的文本無論是長文本還是短文本都能完美匹配。 我怎樣才能做到這一點?
提前致謝
您可以使用flexBasis: auto
閱讀此處了解更多信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.