内部反射原生视图自动宽度

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"与普通的HTML/CSS中的'display:inline-block'相同,对我来说效果非常好.

<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

这对我有用。

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

Answer 4

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

工作演示

Answer 5

tldr：设置alignItems为'stretch'包含文本的视图的父视图样式以外的任何值

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

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

Answer 6

或者干脆：

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

Answer 7

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

这里我的高度是 Constant 并且我正在通过文本的长度扩大宽度。

  <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

只需添加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>

这些对我有用

Answer 9

它适用于尼古拉斯的回答，除非你想将视图集中在某个地方。在这种情况下，您可以在视图周围添加一个包装视图来获取其内容的宽度并设置alignItems: 'center'。像这样：

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

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