React Native方形图像的比例缩放

Question

我有一个view跨越100％的父级，我有一个方格image，需要跨越view的100％并保持其宽高比而不会裁剪。如何在没有绝对尺寸的情况下实现这一目标？

这是我想要做的模拟参考图像：

Answer 1

您可以在resizeMode标记上指定Image。部分选项保持宽高比（cover，contain）。

Answer 2

在你的风格中使用 flex：1 。

<View style={styles.canvasContainer}>
  <Image
    resizeMode="contain"
    source={{uri: 'http://abc.def.com/hij.jpg'}}
    style={styles.canvas} />
</View>

var styles = StyleSheet.create({
    canvasContainer: {
      flex:1,
      alignItems: 'stretch'
    },
    canvas: {
        flex:1          //This is what you want!
       // width: 200, 
       // height: 200
}});

现场演示：https://snack.expo.io/@xystudio/fullsizeimage 快照：

Answer 3

好的，想通了，您需要查看您的图片。

<View style={{ aspectRatio: 1 }}>
  <Image resizeMode="cover" style={{ aspectRatio: 1, height: 100 }} />
<View>