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

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

或者简单地：

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

Answer 3

如果您要基于<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, } }); ，则可以执行以下操作：

const districtNameToShort = {
  'NORTH AND MIDDLE': 'NAM',
  'EAST': 'ET',
  ...
}

WORKING DEMO

Answer 4

两种解决方案

文本组件适合文本内容

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 5

tldr：为包含文本的视图的父视图的样式设置alignItems: 'baseline'

您面临的问题很可能与alignItems: 'stretch'元素上React Native的<View />默认值有关。基本上，默认情况下，所有<View />元素都会使其子元素沿交叉轴（与flexDirection相反的轴）拉伸。在父视图上设置alignItems: 'baseline可以防止此行为并解决您的问题。

下面是一个示例，其中父视图内部包含两个带有蓝色边框的View元素。两个View元素均包含一个环绕Text元素的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>

Answer 6

尝试这种方式以满足您的要求：

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

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

它与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 8

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

Answer 9

这对我有用。

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