React Native中实现图片顶部显示的方案（替代CSS object-position）

React Native没有直接对应CSS object-position的属性，要实现只显示图片顶部区域，可以用以下两种原生方案：

方案一：容器裁剪+图片高度延伸 #

通过固定容器高度并隐藏溢出部分，给图片设置更大的高度，让图片顶部对齐容器顶部，从而只展示顶部区域：

<View style={{ width: '100%', height: 285, overflow: 'hidden' }}>
  <Image
    style={{ width: '100%', height: 380, top: 0 }} // 高度按需调整，确保覆盖容器且顶部对齐
    source={{ uri: `${posterPath + data?.poster_path}` }}
    resizeMode="cover"
  />
</View>
<Text>{data?.title}</Text>

• 容器设置overflow: 'hidden'，裁剪超出固定高度的图片部分
• 图片高度设为大于容器高度（示例中的380可根据图片实际比例微调）
• top: 0确保图片顶部和容器顶部对齐，只展示图片最上方的内容

方案二：缩放图片+指定变换原点 #

利用transform缩放图片，结合transformOrigin（React Native 0.68及以上版本支持）让图片从顶部中心放大，再通过容器裁剪溢出部分：

<View style={{ width: '100%', height: 285, overflow: 'hidden' }}>
  <Image
    style={{ 
      width: '100%', 
      height: 285, 
      transform: [{ scale: 1.3 }], // 缩放比例按需调整
      transformOrigin: 'top center'
    }}
    source={{ uri: `${posterPath + data?.poster_path}` }}
    resizeMode="cover"
  />
</View>
<Text>{data?.title}</Text>

• scale值根据图片实际情况调整，保证顶部区域能填满容器
• transformOrigin: 'top center'确保缩放时以顶部中心为原点，避免顶部内容被挤出容器

内容的提问来源于stack exchange，提问作者ujuy