reactjs - 如何在 React Native 中让父级的宽度包裹其内容？

Question

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

我想要得到的是这样的:

我有一个带有 2 个 subview 的父 View ，即图像和文本，垂直向左对齐。我想要的是父 View 仅覆盖其 subview 的宽度。但我得到的是这样的:

父 View 拉伸(stretch)到移动屏幕的整个宽度。

这是我的代码:

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

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

Answer 1

您将能够使用flex来做到这一点。我找到了这个guide在使用 flex 时非常有帮助。

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