如何使视图高度适合 React Native 中的内容？

Question

我正在构建一个移动聊天应用程序，我遇到了这个问题，我在视图中将消息显示为文本，但显然我无法使消息显示在适合内部的特定高度风景。要么是消息太长，显示不全（视图中 space 不够），要么是消息出现了，但文本后面有很多 space。

请查看准确描述问题的图片：

这是我的代码：

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

我需要的是红色和深蓝色视图的动态高度，使里面的文本无论是长文本还是短文本都能完美匹配。我怎样才能做到这一点？

提前致谢

Answer 1

您可以使用flexBasis: auto

阅读here了解更多信息

如何使视图高度适合 React Native 中的内容？

How to make a view height fit the content inside in react native?

javascript

css

mobile

reactjs

react-native