我正在構建一個移動聊天應用程式，我遇到了這個問題，我將訊息顯示為視圖內的文本，但顯然我無法讓訊息顯示在某個高度以適合視圖內部。要么是訊息太長，因此無法完全顯示（視圖中沒有足夠的空間），要么是出現了訊息，但文本后面有很多空格。
請查看準確描述問題的影像：
這是我的代碼：
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,
},
我需要的是紅色和深藍色視圖的動態高度，以使里面的文本無論是長文本還是短文本都完美契合。我怎樣才能做到這一點？
提前謝謝??
uj5u.com熱心網友回復：
您可以使用flexBasis: auto
閱讀此處了解更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/466439.html
標籤：javascript css 反应 反应式 移动的
上一篇：ReactJS中的文本替換