单元React Native的动态宽度

Question

我试图在React Native上实现一个简单的聊天视图的动态尺寸单元格。 Flex box dynamic width and height链接中的问题和解答对我有很大帮助，但我没有对单元格应用动态宽度。这是我自己的手机代码。

class ChatCell extends React.Component {
  render() {
    return (
      <View style={{ marginTop: 10, marginBottom: 10 }}>
        <View
          style={{
            backgroundColor: "rgba(245,25,116,1)",
            borderBottomLeftRadius: 12,
            borderTopLeftRadius: 12,
            borderTopRightRadius: 12,
            marginLeft: 100,
            marginRight: 15,
            padding: 5,
            flex: -1
          }}
        >
          <Text
            style={{
              padding: 5,
              textAlign: "right",
              fontFamily: "inter-medium",
              color: "white"
            }}
          >
            {this.props.message}
          </Text>
        </View>
      </View>
    );
  }
}

这是我所做的屏幕截图。

我的问题是，当我输入诸如'OK!'之类的简单消息时，其宽度必须为stretch。那么如何实现呢？就像给minimum width一样？ 我尝试添加alignSelf:'stretch'，但对我来说不起作用。

我做错了什么？

谢谢

Answer 1

请检查一些类似的问题here，here和here。

您可以尝试在alignSelf: 'flex-start'中添加alignSelf:'baseline'或View以使其适合内容。