React-native 视图自动宽度由内部文本 [英] React-native view auto width by text inside

问题描述

据我所知，react-native 样式表不支持 min-width/max-width 属性.

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

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

我的代码是:

 <视图样式={{backgroundColor: '#000000'}}><Text style={{color: '#ffffff'}}>此处为示例文本</Text></查看>

在常见的 HTML/CSS 中，我会意识到:

解决方案

"alignSelf" 与 'display: inline-block' 在普通 HTML/CSS 中的作用相同，对我来说效果很好.

<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}><Text style={{color: '#ffffff'}}>示例文本在这里</文本></查看>

As far as I know, react-native stylesheet doesn't supports min-width/max-width property.

I have a view and text inside. The view in auto width doesn't resize by inherit text element.

How to fix that issue and make view width automatically set using text width?

My code is:

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

In common HTML/CSS I would realize so:

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

Notice: flex: 1 on parent view is not helpful for me. Text appears as

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

解决方案

"alignSelf" does the same as 'display: inline-block' would in common HTML/CSS and it works very well for me.

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

这篇关于React-native 视图自动宽度由内部文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！