React-native view auto width by text inside

Posted 2023-02-22

【中文标题】React-native view auto width by text inside

【英文标题】：

【发布时间】：2016-11-09 01:58:52

【问题描述】：

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

【参考方案1】：

"alignSelf" 与 'display: inline-block' 在常见的 HTML/CSS 中的作用相同，它对我来说效果很好。

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

【讨论】：

天才，谢谢。 Text 上的第二个alignSelf: 'flex-start' 本身是否必要？

@JoshuaPinter 我确认 -- alignSelf: 'flex-start' 不需要 Text。

@SanketSahu 感谢您更新答案。我重新阅读了我的评论，就像“第二个alignSelf？”

绝对是的！我建议也使用“minHeight”属性！

想知道为什么视图占据了整个宽度。这解决了它！

【参考方案2】：

两种解决方案

文本组件适合文本内容

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>

【讨论】：

在与 flexbox 苦苦挣扎数小时后，这个简单的技巧为我解决了一切问题。

第二个选项效果很好，但只有将 style= flex:0 应用于有文本的视图，才能工作！ （它确实适用于视图中的任何其他子项，例如，如果您有一个按钮、一个图标或另一个视图，当您制作 flex:0 时，您会删除组件使用 flexbox 增长的属性）

【参考方案3】：

如果您想基于 <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,
  
);

WORKING DEMO

【参考方案4】：

tldr：将 alignItems 设置为除 'stretch' 之外的任何值，以用于包含 Text 的 View 的父 View 的样式

您面临的问题可能与 React Native 在 <View /> 元素上的 alignItems: 'stretch' 默认值有关。基本上，默认情况下，所有<View /> 元素都会使其子元素沿交叉轴（与flexDirection 相对的轴）伸展。在父视图上将alignItems 设置为"stretch" 以外的任何值（“baseline”、“flex-start”、“flex-end”或“center”）可防止此行为并解决您的问题。

下面是一个示例，其中有两个 View 元素包含在带有蓝色边框的父 View 内。这两个 View 元素各自包含一个包裹在 Text 元素周围的 View。在第一个具有默认样式的 View 的情况下，黄色子 View 水平扩展以填充整个宽度。在 alignItems: 'baseline' 的第二个 View 中，粉红色 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 属性解释得很好here。

【参考方案5】：

或者简单地说：

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

【参考方案6】：

这对我有用。

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

【参考方案7】：

根据您的要求尝试这种方式：

这里我的高度是恒定的，我将宽度扩大为文本的长度。

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

还可以尝试为视图提供填充以正确排列文本。

【参考方案8】：

它适用于 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>

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

【讨论】：

这是最好的解决方案，感谢您的解释。

【参考方案9】：

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