反应本机 minWidth 问题

【问题标题】：React Native minWidth Issue反应本机 minWidth 问题
【发布时间】：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)，它可以正常工作，但我确实需要设置宽度和高度。

【问题讨论】：

标签： javascript react-native

【解决方案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>

【讨论】：