如何让父级的宽度在React Native中包装它的内容？

Question

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

我想要得到的是这样的:

我有一个父视图有两个孩子,图像和文本,垂直对齐左边.我想要的是父视图只覆盖其子的宽度.但相反,我得到的是:

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

这是我的代码:

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

与Android的'wrap-content'宽度值类似的东西.

Answer 1

你将能够使用flex.我发现本指南在使用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>
);