Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/react-native/7.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 细胞动态宽度_Javascript_React Native_Flexbox - Fatal编程技术网
Fatal编程技术网

Javascript 细胞动态宽度

javascript react-native

Javascript 细胞动态宽度,javascript,react-native,flexbox,Javascript,React Native,Flexbox,我正在尝试在React Native上为简单的聊天视图创建动态大小的单元格。链接中的问题和答案对我帮助很大，但我没有对单元格应用动态宽度。这是我的手机号码 class ChatCell extends React.Component { render() { return ( <View style={{ marginTop: 10, marginBottom: 10 }}> <View style={{

我正在尝试在React Native上为简单的聊天视图创建动态大小的单元格。链接中的问题和答案对我帮助很大，但我没有对单元格应用动态宽度。这是我的手机号码

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>
    );
  }
}
类ChatCell扩展React.Component{ render（）{ 返回( {this.props.message} ); } } 这是我制作的屏幕截图

我的问题是当我输入一个简单的消息时，比如
“OK！”它必须
拉伸到其宽度。那么我该如何实现它，比如给出
最小宽度
？
我试图添加
alignSelf:'stretch'
，但它对我无效

我做错了什么，我遗漏了什么


谢谢，
请检查一些类似的问题，然后


您可以尝试在
视图中添加
alignSelf:'flex start'
或
alignSelf:'baseline'
，使其适合其内容。
Hmm我可以用jFiddle demohanks获得简单提示。我使用了
alignSelf:'flex-start'
和remove
marginLeft
prop，然后对我有效。我之前犯了一个错误，将
alignSelf:'flex-start'
block设置为notcontainer查看最外面的视图。谢谢