React-native view auto width by text inside

Question

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

Answer 1

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

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

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

Answer 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

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

Answer 5

或者简单地说：

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

Answer 6

这对我有用。

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

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

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

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

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

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