如何使父级宽度在React Native中包装其内容？

Question

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

我想要得到的是这样的：

我有一个包含2个孩子的父视图，图像和文本，垂直对齐左边。我想要的是父视图只覆盖其子的宽度。但我得到的是这个：

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

这是我的代码：

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

类似于Android＆＃39; wrap-content＆＃39;宽度值。

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