在 React Native 中像 Instagram 一样显示图像的一部分？

Question

我正在构建相册 React Native 移动应用程序。因为我想将作为宽图像（1）的一部分的方形图像显示为图像（2）。

所以问题是，如何在 React Native 中正确缩放图像的中间？我可以用 StyleSheet(CSS) 来做吗？或者有图书馆吗？

图像(1) - 2048 像素 x 1152 像素

图像(2) - 1080 像素 x 1080 像素

Answer 1

查看Image组件resizeMode属性。它应该适合你。

https://facebook.github.io/react-native/docs/image.html#resizemode

它决定了当帧与原始图像尺寸不匹配时如何调整图像大小。

• cover：均匀缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）。

• contains：均匀缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）。

• 拉伸：独立缩放宽度和高度，这可能会改变 src 的纵横比。

• 重复：重复图像以覆盖视图的框架。图像将保持其大小和纵横比。（仅限 iOS）

试试这个，例如：

<Image style={{width: 100, height: 100}} resizeMode="cover" />