Javascript 按内部文本自动调整本机视图宽度

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

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

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

我的代码是：

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

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

现在视图将自行放大

---

另外，请尝试为视图添加填充，以便正确排列文本。

它与Nicholas answer配合使用，除非您想将视图居中放置。在这种情况下，您可以在视图周围添加一个包装器视图，以获取其内容的宽度，并设置

alignItems:'center'

。像这样：

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

{‘您的文本在这里’}

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

两种解决方案 文本组件适合文本内容

您可以将

组件包装到另一个

组件中

通过这样做，内部的所有内容不再使用flexbox布局，而是使用文本布局

{'yourtexthere'}

视图容器适应嵌套文本组件的内容 在这种情况下，您需要使用props

alignSelf

，以便看到容器收缩到其内容的大小

{'yourtexthere'}

{this.setModalVisible（！this.state.visible）}>
接近
const styles=StyleSheet.create({
图像取消：{
高度：“自动”，
宽度：“自动”，
辩护内容：'中心'，
背景颜色：'#000000'，
对齐项目：“柔性端”，
},
text取消：{
paddingTop:25，
paddingRight:25，
尺码：18，
颜色：“ffffff”，
身高：50，
},
}};

或者简单地说：

  <Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</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,
  }
});

{text}
const styles=StyleSheet.create({
容器：{
flexDirection:“行”，
alignSelf：“灵活启动”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
}
});

---

tldr:为包含文本的视图的父视图的样式设置

alignItems

为

'stretch'

以外的任何值

您面临的问题可能与React Native对

元素上的

alignItems的默认值有关：'stretch'

。基本上，默认情况下，所有

元素都会导致其子元素沿横轴拉伸（与

flexDirection

相反的轴）。将父视图上的

alignItems

设置为除

“拉伸”

（“基线”、“弹性开始”、“弹性结束”或“中心”）以外的任何值，可以防止此行为并解决您的问题

下面是一个示例，其中有两个视图元素包含在带有蓝色边框的父视图中。这两个视图元素各自包含一个围绕文本元素的视图。对于第一个具有默认样式的视图，黄色子视图水平扩展以填充整个宽度。在第二个视图中，

alignItems:'基线'

，粉红色视图不会展开，并保持其子文本元素的大小

你好
你好

align items

属性解释得很好。

这对我来说很有用

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

abc

Genius，谢谢。

Text

上的第二个

alignSelf:“flex start”

本身有必要吗？@JoshuaPinter我确认--

alignSelf:“flex start”

在

Text

上是不需要的。@SanketSahu感谢您更新了答案。我重新阅读了我的评论，就像是“第二个

alignSelf

？”绝对是的！我建议也使用“minHeight”属性！我想知道为什么视图占据了整个宽度。这解决了它！在与flexbox进行了数小时的斗争后，这个简单的技巧为我解决了所有问题。第二个选项工作得非常好，但只有将style={{flex:0}应用到包含文本的视图才能工作！（它确实适用于视图中的任何其他子视图，例如，如果您有一个按钮、图标或其他视图，当您使用flex:0时，您将删除组件使用flexbox增长的属性）这是最好的解决方案，感谢您的解释。

  <Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</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={{ 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>

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