Question

我有一个2列的产品网格，我试图让图像填充它的容器宽度。使用当前代码，图像填充imageWrapper的可用高度。如果我将一个较大的高度设置为imageWrapper，则图像会拉伸以填充宽度，但这不可行，因为来自不同产品的图像具有可变高度。

  <TouchableOpacity style={styles.item} onPress={() => this.openProduct(item)}>
    <Text style={styles.boldLabel}>{item.name}</Text>
    <View style={styles.imageWrapper}>
        <Image style={styles.gridImage}
            resizeMode={'contain'}
           source={{uri: image }} />
    </View>
  </TouchableOpacity>

css：

item: {
    flexDirection: 'column',
    width: Metrics.screenWidth / 2 - Metrics.doubleBaseMargin,
    justifyContent: 'center',
    margin: Metrics.baseMargin,
    backgroundColor: "#FFF",
},
imageWrapper: {
    flex:1,
    flexDirection:'row'
},
gridImage: {
    flex:1,
    height: null,
    width: null
}

非常感谢任何帮助。谢谢！

Answer 1

试试react-native-fit-image。（不是我的模块）。显示保持宽高比的图像是最好的。只需确保为容器和网格正确设置flex属性。

反应原生弹性箱中的全宽图像不拉伸

1 个答案: