【发布时间】:2018-02-24 20:42:07
【问题描述】:
我正在构建相册 React Native 移动应用。 因为我想将作为宽图像(1)的一部分的方形图像显示为图像(2)。
所以问题,如何在 React Native 中正确缩放图像的中间? 我可以使用 StyleSheet(CSS) 吗?或者有图书馆吗?
【问题讨论】:
标签: css image reactjs http react-native
我正在构建相册 React Native 移动应用。 因为我想将作为宽图像(1)的一部分的方形图像显示为图像(2)。
所以问题,如何在 React Native 中正确缩放图像的中间? 我可以使用 StyleSheet(CSS) 吗?或者有图书馆吗?
【问题讨论】:
标签: css image reactjs http react-native
查看Image 组件resizeMode 属性。它应该适合你。
https://facebook.github.io/react-native/docs/image.html#resizemode
它决定了当框架与原始图像尺寸不匹配时如何调整图像大小。
覆盖:均匀缩放图像(保持图像的纵横比),使图像的两个尺寸(宽度和高度)都等于或大于相应的尺寸视图(减去填充)。
包含:统一缩放图像(保持图像的纵横比),使图像的两个尺寸(宽度和高度)都等于或小于相应的尺寸视图(减去填充)。
stretch:独立缩放宽度和高度,这可能会改变 src 的纵横比。
重复:重复图像以覆盖视图的框架。图像将保持其大小和纵横比。 (仅限 iOS)
试试这个例子:
<Image style={{width: 100, height: 100}} resizeMode="cover" />
【讨论】: