ios - React Native ImageBackground 宽度随着里面的内容自动增长

Question

我有一个带有图像横幅的水平平面列表。问题是宽度随着内部文本的增加而增加。我想要固定图像宽度。请建议我处理这个问题的有效方法。我将在下面分享我的代码。

const carData = [
  {
    id: 1,
    bgImage: 'https://picsum.photos/200',
    headerText: 'Did you know',
    discountVal: '20%',
    bodyText:
      'Of power was generated via Bettrbarista clean energy initiative from compostable serveware to reusables.',
  },
  {
    id: 2,
    bgImage: 'https://picsum.photos/200',
    headerText: 'Did you know',
    discountVal: '20%',
    bodyText:
      'Of power was generated via Bettrbarista clean energy initiative from compostable serveware to reusables.',
  },
];
const renderItem = item => {
  const {
    renderOrderItem,
    bgImageStyle,
    headerTextStyle,
    discountValStyle,
    bodyTextStyle,
  } = styles;
  return (
    <View style={renderOrderItem}>
      <ImageBackground
        imageStyle={{ borderRadius: 10 }}
        style={bgImageStyle}
        source={{ uri: item.bgImage }}
      >
        <Text style={headerTextStyle}>{item.headerText}</Text>
        <Text isSerif style={discountValStyle}>
          {item.discountVal}
        </Text>
        {/* <Text style={bodyTextStyle}>{item.bodyText}</Text> */}
      </ImageBackground>
    </View>
  );
};
      <FlatList
        data={carData}
        ItemSeparatorComponent={FlatListItemSeparator}
        style={{ flex: 1 }}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item }) => renderItem(item)}
        keyExtractor={id => id.toString()}
      />

提前致谢

Answer 1

为什么不将 flex:1 赋予 imageBackground 并将图像的大小模式调整为 contain。