如何让父母的宽度在 React Native 中包裹它的内容？答案

【问题标题】：How to make parent's width wrap its content in React Native?如何让父母的宽度在 React Native 中包裹它的内容？
【发布时间】：2017-12-23 09:37:02
【问题描述】：

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

我想要得到的是这样的：

我有一个父视图，其中有 2 个子视图，图像和文本，垂直对齐到左侧。我想要的是父视图仅覆盖其子视图的宽度。但我得到的是这样的：

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

这是我的代码：

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

类似于 Android 的 'wrap-content' 宽度值。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您可以使用flex 执行此操作。我发现 guide 在使用 flex 时非常有用。

一个好的起点是创建一个父视图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>
);

【讨论】：