如何让父级的宽度在 React Native 中包裹其内容? [英] How to make parent's width wrap its content in React Native?

问题描述

我是 React Native 的新手，所以这可能是一个愚蠢的问题.

I am new to React Native so this might be a silly question.

我想要得到的是这样的:

What I am trying to get is something like this :

我的父视图有 2 个子视图，图像和文本，垂直向左对齐.我想要的是父视图只覆盖其子视图的宽度.但我得到的是这个:

Where I have a parent view with 2 children, Image and Text, aligned vertically to the left. What I want is the parent view to cover only the width of its children. But instead what I get is this :

父视图拉伸到移动屏幕的整个宽度.

The parent view stretches to the complete width of the mobile screen.

这是我的代码:

render () (<View style={{backgroundColor: '#333333'}}>
  <Image source={btnImageSource} />
  <Text>Some label</Text>
</View>);

类似于 Android 的wrap-content"宽度值.

推荐答案

您将能够使用 flex 来做到这一点.我发现这个 guide 在使用 flex 时非常有用.

You will be able to do this using flex. I found this guide to be very helpful when working with flex.

一个好的起点是创建一个父视图，它是 flexDirection: row, justifyContent: flex-start

A good starting point would be to create a parent View that is flexDirection: row, justifyContent: flex-start

render () (
    <View style={{justifyContent: 'flex-start', flexDirection: 'row'}}>
        <View style={{backgroundColor: '#333333'}}>
            <Image source={btnImageSource} />
            <Text>Some label</Text>
        </View>
    </View>
);

这篇关于如何让父级的宽度在 React Native 中包裹其内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！