据我所知，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>

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

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

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

或者简单地：

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

如果要将宽度应用于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,
  }
});

工作演示

按照您的要求尝试这种方式：

在这里，我的身高是常数，我在通过文字的长度来增加宽度。

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

另外，请尝试在“视图”中添加填充以正确排列文本。

tldr：设置alignItems为除以下以外的任何值'stretch'包含Text的View的父View样式

您面临的问题可能与React Native元素alignItems: 'stretch'上的默认值有关<View />。基本上，<View />默认情况下，所有元素都会使其子元素沿交叉轴（与相对的轴）拉伸flexDirection。在父视图上设置alignItems为除"stretch"（“基线”，“弹性起始”，“弹性终止”或“中心”）以外的任何值可防止此行为并解决您的问题。

下面是一个示例，其中在带有蓝色边框的父视图中包含两个View元素。两个View元素均包含一个环绕Text元素的View。对于具有默认样式的第一个视图，黄色子视图将水平扩展以填充整个宽度。在第二个View中alignItems: 'baseline'，粉色视图不会展开，并保持其子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属性在这里得到了很好的解释。

除非您想将视图居中放置，否则它可以与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>

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

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