根据内部文本反应本机视图自动宽度

Question

据我所知，react-本机样式表不支持min-wide/max-wide属性。

我在里面有一个视图和文本。“自动宽度”中的视图不会通过继承文本元素来调整大小。

如何解决这个问题并使用文本宽度自动设置视图宽度？

我的代码是:

 <View style={{backgroundColor: '#000000'}}>
      <Text style={{color: '#ffffff'}}>Sample text here</Text>
 </View>

在普通的HTML/CSS中我会这样认识到:

 <div style="background-color: #000; display: inline;">Sample text here</div>

注意：父视图上的flex:1对我没有帮助。文本显示为

"Sam"
"ple"
"Tex"
"t"

Answer 1

匿名用户

tldr：将对齐项设置为包含文本的视图的父视图样式的“拉伸”以外的任何值

您面临的问题可能与React Native在< code >上的< code > align items:' stretch ' 的默认值有关

下面是一个示例，其中有两个 View 元素包含在具有蓝色边框的父视图中。两个 View 元素各自包含一个环绕在文本元素周围的视图。对于具有默认样式的第一个视图，黄色子视图将水平展开以填充整个宽度。在第二个视图中，对齐项：“基线”，粉红色的视图不会展开，并保持其子文本元素的大小。

<View style={{ borderWidth: 5, borderColor: 'blue' }}>
    <View>
        <View style={{ backgroundColor: 'yellow' }}>
            <Text style={{ fontSize: 30 }}>Hello</Text>
        </View>
    </View>
    <View style={{ alignItems: 'baseline' }}>
        <View style={{ backgroundColor: 'pink' }}>
            <Text style={{ fontSize: 30 }}>Hello</Text>
        </View>
    </View>
</View>

这里很好地解释了< code>align-items属性。

Answer 2

https://facebook.github.io/react-native/docs/text.html#containers

您可以包装

通过这样做，内部的所有内容都不再使用flexbox布局，而是使用文本布局。

<Text>
   <Text>{'Your text here'}</Text>
</Text>

在这种情况下，您需要使用 props alignSelf 才能看到容器缩小到其内容的大小。

<View>
  <View style={{ alignSelf: 'center', padding: 12}} >
     <Text>{'Your text here'}</Text>
  </View>
</View>

Answer 3

“alignSelf”和普通HTML/CSS中的“display: inline-block”做的一样，对我来说效果很好。

<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
 <Text style={{color: '#ffffff'}}>
  Sample text here
 </Text>
</View>