React-native 视图按内部文本自动宽度两种解决方案

javascript reactjs react-native

2022-08-30 04:27:19

据我所知，react-native 样式表不支持最小宽度/最大宽度属性。

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

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

我的代码是：

 <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：父视图上的 flex：1 对我没有帮助。文本显示为

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

答案 1

“alignSelf”与“display：inline-block”在常见的HTML / CSS中相同，它对我来说效果很好。

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

答案 2

两种解决方案

您可以将组件包装到另一个组件中。<Text><Text>

通过这样做，里面的一切都不再使用flexbox布局，而是使用文本布局。

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

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

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