Javascript React-native 视图自动宽度按文本内部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38233789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-native view auto width by text inside
提问by xercool
As i know, react-native stylesheet doesn't supports min-width/max-width property.
据我所知，react-native 样式表不支持 min-width/max-width 属性。
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:
在常见的 HTML/CSS 中，我会意识到：
<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
注意： flex: 1 在父视图上对我没有帮助。文本显示为
"Sam"
"ple"
"Tex"
"t"
回答by Nicholas Marcaccini Augusto
"alignSelf" does the same as 'display: inline-block' would in common HTML/CSS and it works very well for me.
"alignSelf" 与 'display: inline-block' 在普通 HTML/CSS 中的作用相同，对我来说效果很好。
<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
<Text style={{color: '#ffffff'}}>
Sample text here
</Text>
</View>
回答by Steven
Two Solutions
两种解决方案
Text component fits the text content
文本组件适合文本内容
https://facebook.github.io/react-native/docs/text.html#containers
https://facebook.github.io/react-native/docs/text.html#containers
You can wrap <Text>components into another <Text>component.
您可以将<Text>组件包装到另一个<Text>组件中。
By doing this everything inside is no longer using the flexbox layout but using text layout.
通过这样做，里面的所有东西都不再使用 flexbox 布局，而是使用文本布局。
<Text>
<Text>{'Your text here'}</Text>
</Text>
View container adapt to nested Text component's content
视图容器适应嵌套 Text 组件的内容
In that case you need to use the props alignSelfin order to see the container shrink to the size of its content.
在这种情况下，您需要使用道具alignSelf才能看到容器缩小到其内容的大小。
<View>
<View style={{ alignSelf: 'center', padding: 12}} >
<Text>{'Your text here'}</Text>
</View>
</View>
回答by ZEE
Or simply:
或者干脆：
<Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</Text>
回答by Keshav Gera
<View style={styles.imageCancel}>
<TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
<Text style={styles.textCancel} >Close</Text>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
imageCancel: {
height: 'auto',
width: 'auto',
justifyContent:'center',
backgroundColor: '#000000',
alignItems: 'flex-end',
},
textCancel: {
paddingTop:25,
paddingRight:25,
fontSize : 18,
color : "#ffffff",
height: 50,
},
}};
回答by Ryan Saleh
Try this way for your requirement:
根据您的要求尝试这种方式：
Here my height is Constant and i am enlarging the width by the length of text.
这里我的高度是 Constant 并且我正在通过文本的长度扩大宽度。
<View style={{flexDirection: 'row'}}>
<View style={{
height: 30, width: 'auto', justifyContent:'center',
alignItems: 'center'}}>
<Text style={{color:'white'}}>Now View will enlarge byitself</Text>
</View>
</View>
For Both Height and Width Try Changing the height inside the View style to 'auto' full code bellow:
对于高度和宽度，尝试将视图样式内的高度更改为“自动”完整代码如下：
<View style={{flexDirection: 'row'}}>
<View style={{
height: 'auto', width: 'auto', justifyContent:'center',
alignItems: 'center'}}>
<Text style={{color:'white'}}>Now View will enlarge byitself</Text>
</View>
</View>
Also try Giving padding to the View for arrange the text properly.
还可以尝试为视图提供填充以正确排列文本。
回答by Vladyslav Zavalykhatko
It works with Nicholas answer unless you want to center the view somewhere. In that case, you could add a wrapper view around the view to obtain the width of its content and set alignItems: 'center'. Like this:
它适用于 Nicholas 的回答，除非您想将视图居中放置。在这种情况下，您可以在视图周围添加一个包装视图以获取其内容的宽度并设置alignItems: 'center'. 像这样：
<View style={{ flex: 1, alignItems: 'center' }}>
<View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
<Text>{'Your text is here'}</Text>
</View>
</View>
The background color is added to show the size of the inner view
添加背景色，显示内部视图的大小
