react-native flexbox中的全宽图像不拉伸答案

【问题标题】：Full width image in react-native flexbox not stretchingreact-native flexbox中的全宽图像不拉伸
【发布时间】：2018-01-26 14:29:34
【问题描述】：

我有一个 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
}

任何帮助将不胜感激。谢谢！

【问题讨论】：

试试这个 gridImage: { flex:1, height: 100%, width: 100% }
我试过了，它似乎对空高度/宽度没有影响。
我删除了我的答案。请注意，您是在问如何使图像填充其容器的宽度，而不是 resize 它，因此如果您想要一个正确的答案，您需要解决这个问题

标签： html css react-native flexbox

【解决方案1】：

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

【讨论】：

我尝试了 react-native-fit-image 但在调整图像大小时会导致奇怪的闪烁。我现在使用 react-native-responsive-image 似乎解决了我的问题。谢谢