反应本机 minWidth 问题

Posted 2023-02-16

【中文标题】反应本机 minWidth 问题

【英文标题】：React Native minWidth Issue

【发布时间】：2019-10-10 01:22:09

【问题描述】：

我正在尝试为具有 (100%) 宽度的视图内的文本设置最小宽度，不幸的是，文本占用了整个宽度而不是 minWidth，我的代码如下：

<View style=width:'100%',height:'50%'>
     <Text style=minWidth:30,borderWidth:1>Hello</Text>
</View>

如果我将视图的样式更改为 (flex:1)，它可以正常工作，但我确实需要设置宽度和高度。

【参考方案1】：

我不确定您希望看到什么。默认情况下，视图内容将占据所有视图宽度（如显示块）。 您可以将 flexDirection:'row' 和 flexWrap:'wrap' 设置为您的容器，以使您的视图像 display: inline 一样，如果您不希望文本占据所有视图高度，则用另一个 <View> 包装文本。

  <View style=width:'100%',height:'50%', flexDirection:'row', flexWrap:'wrap'>
    <View>
      <Text style=minWidth:30, borderWidth:1>Hello</Text>
    </View>
  </View>