据我所知，react-native 样式表不支持 min-width/max-width 属性。
我在里面有一个视图和文本。自动宽度中的视图不会通过继承文本元素调整大小。
如何解决该问题并使用文本宽度自动设置视图宽度？
我的代码是：
<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"
"alignSelf" 与 'display: inline-block' 在普通 HTML/CSS 中的作用相同，对我来说效果很好。
<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
<Text style={{color: '#ffffff'}}>
Sample text here
</Text>
</View>
https://facebook.github.io/react-native/docs/text.html#containers
您可以将<Text>组件包装到另一个<Text>组件中。
通过这样做，里面的所有东西都不再使用 flexbox 布局，而是使用文本布局。
<Text>
<Text>{'Your text here'}</Text>
</Text>
在这种情况下，您需要使用propsalignSelf才能看到容器缩小到其内容的大小。
<View>
<View style={{ alignSelf: 'center', padding: 12}} >
<Text>{'Your text here'}</Text>
</View>
</View>
如果您想将宽度应用于View基于<Text>，您可以执行以下操作：
<View style={styles.container}>
<Text>
{text}
</Text>
</View>
const styles = StyleSheet.create({
container: {
flexDirection:"row",
alignSelf:"flex-start",
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
});
tldr：设置alignItems为'stretch'包含文本的视图的父视图样式以外的任何值
您面临的问题可能与 React NativealignItems: 'stretch'在<View />元素上的默认值有关。基本上，<View />默认情况下，所有元素都会使其子元素沿交叉轴（与 相对的轴）拉伸flexDirection。在父视图上设置alignItems为除"stretch"("baseline"、"flex-start"、"flex-end" 或 "center")之外的任何值可防止此行为并解决您的问题。
下面是一个示例，其中在带有蓝色边框的父视图中包含两个 View 元素。这两个 View 元素每个都包含一个环绕 Text 元素的 View。在第一个具有默认样式的 View 的情况下，黄色子 View 水平扩展以填充整个宽度。在第二个 View where 中alignItems: 'baseline'，粉红色 View 不会扩展并保持其子 Text 元素的大小。
<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>
该align-items属性在这里得到了很好的解释。
或者干脆：
<Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</Text>