【问题标题】:React Native Image Position反应原生图像位置
【发布时间】:2016-09-13 00:30:07
【问题描述】:

有没有办法在resizeMode 设置为cover 时控制图像位置?我正在寻找可以通过在传统 CSS 中使用 background-positon: center bottom 来实现的类似结果。

下面是这种情况的说明:

  1. 与屏幕尺寸相同的图像
  2. 图片具有自定义高度,图片居中
  3. (所需)具有自定义高度的图片,但图片与元素的底部边缘对齐

我的代码:

<Image source={require('./eifell.jpg')} resizeMode={Image.resizeMode.cover} style={{ height: 300 }} />

【问题讨论】:

  • 您确定编号吗?你真的想在你的图片中实现nr.3,图片超出框架吗?

标签: react-native


【解决方案1】:

我相信您必须通过在图像样式上使用transforms 属性并利用translateY 转换来实现这一点。

这将涉及一些数学...我想你需要按照以下步骤操作:

  1. 使用 Image.getSize() 查找图像的尺寸

  2. 然后根据Dimensions.get('window') 的窗口大小计算您的图像将缩放到多少像素。

  3. 找出显示的高度(例如 667 像素)和所需的图像高度(在您的示例中为 300 像素)之间的差异

  4. 然后将图像向上平移那么多像素。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-07-05
    • 1970-01-01
    • 2018-02-27
    • 2018-05-04
    • 2016-06-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多