【问题标题】:Show the part of the image like Instagram in React Native?在 React Native 中显示像 Instagram 这样的图像部分?
【发布时间】:2018-02-24 20:42:07
【问题描述】:

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

所以问题,如何在 React Native 中正确缩放图像的中间? 我可以使用 StyleSheet(CSS) 吗?或者有图书馆吗?

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

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

【问题讨论】:

    标签: css image reactjs http react-native


    【解决方案1】:

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

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

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

    • 覆盖:均匀缩放图像(保持图像的纵横比),使图像的两个尺寸(宽度和高度)都等于或大于相应的尺寸视图(减去填充)。

    • 包含:统一缩放图像(保持图像的纵横比),使图像的两个尺寸(宽度和高度)都等于或小于相应的尺寸视图(减去填充)。

    • stretch:独立缩放宽度和高度,这可能会改变 src 的纵横比。

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

    试试这个例子:

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-08-04
    • 1970-01-01
    • 1970-01-01
    • 2016-11-02
    • 1970-01-01
    • 1970-01-01
    • 2019-02-07
    • 2022-01-01
    相关资源
    最近更新 更多