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

Question

我有一个 2 列的产品网格，我正在尝试让图像填充其容器的宽度。使用当前代码，图像填充图像包装器的可用高度。如果我将较大的高度设置为 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属性即可。