“ alignSelf”与常见的 HTML/CSS 中的“ display: inline-block”具有相同的功能，它对我来说非常有用。

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

按照你的要求试试这个方法:

这里我的高度是常数，我扩大的宽度的长度的文本。

  <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>

对于高度和宽度尝试将视图样式中的高度改为“自动”下面的完整代码:

  <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>

也可以尝试给视图添加空白，以便正确排列文本。

它与尼古拉斯回答工作，除非你想中心的地方看法。在这种情况下，可以在视图周围添加一个包装器视图，以获取其内容的宽度并设置 alignItems: 'center'。像这样:

    <View style=\{\{ flex: 1, alignItems: 'center' }}>
<View style=\{\{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
<Text>{'Your text is here'}</Text>
</View>
</View>

添加背景色是为了显示内部视图的大小

两种解决方案

文本组件适合文本内容

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

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

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

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

视图容器适应嵌套文本组件的内容

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

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

    <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,
},
}};

或者简单地说:

  <Text style=\{\{color: '#ffffff', alignSelf: 'center'}}>Sample text here</Text>

如果你想在 <Text>的基础上应用宽度到 View，你可以这样做:

<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 Native<View />元素上的 alignItems: 'stretch'默认值有关。基本上，默认情况下，所有 <View />元素都会导致它们的子元素沿着十字轴(与 flexDirection相对的轴)拉伸。在父视图上将 alignItems设置为 "stretch"以外的任何值(“基线”、“ flex-start”、“ flex-end”或“ center”)都可以防止这种行为并解决您的问题。

下面是一个示例，其中有两个 View 元素包含在一个带蓝色边框的父 View 中。两个 View 元素各自包含一个包装在 Text 元素周围的 View。在第一个视图使用默认样式的情况下，黄色子视图水平展开以填充整个宽度。在 alignItems: 'baseline'的第二个视图中，粉红色视图不会展开并保持其子文本元素的大小。

<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属性解释得很好，给你。

这对我有用。

<View style=\{\{alignSelf: 'flex-start', backgroundColor: 'red'}}>
<Text>abc</Text>
</View>

只要将 alignSelf添加到文本样式中，就不会占用整个宽度

 <View style=\{\{flex: 1}}>
<Text style=\{\{alignSelf: 'center'}}>{'Your text here'}</Text>
<Text style=\{\{alignSelf: 'baseline'}}>{'Your text here'}</Text>
<Text style=\{\{alignSelf: 'flex-end'}}>{'Your text here'}</Text>
<Text style=\{\{alignSelf: 'flex-start'}}>{'Your text here'}</Text>
</View>

这些对我很管用