我正在构建一个移动的聊天应用程序，我遇到了这个问题，我将消息显示为视图中的文本，但显然我无法使消息显示在视图中适合的特定高度。这可能是因为消息太长，所以无法完全显示（视图中没有足够的空间），或者消息显示，但文本后面有很多空格。
请查看准确描述问题的图像：

下面是我的代码：
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,
},

我需要的是一个动态的高度为红色和深蓝色的意见，使文字内完全适合无论是长或短的文本。我如何才能做到这一点？
先谢谢你了🙏