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

IT技术 reactjs react-native
2021-05-11 22:21:45

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

我想要得到的是这样的: 在此处输入图片说明

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

在此处输入图片说明

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

这是我的代码:

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

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

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