javascript - React Native 超大图片定位

Question

我有两个图像，我想使用 React Native 将它们水平放置。我想控制每个图像相对于另一个图像占用的屏幕百分比。这些图像加起来将大于可用的水平屏幕空间。我想保持它们的原始尺寸并简单地将它们裁剪在屏幕边缘。

这是我希望这两个图像如何显示的快速模型，其中显示的图像的其他部分超出了被裁剪的屏幕:

我尝试了各种方法，但似乎没有任何效果。任何想法将不胜感激。

编辑一种方法，即 https://stackoverflow.com/users/7016280/jhack 建议的方法, 如下:

<View style={{flex: 1, flexDirection: 'row'}}>
  <Image style={{width:200}}
    source={require('./image.jpg')}
  />
  <Image style={{width:175}}
    source={require('./image.jpg')}
  />
</View>

这会产生:

它实现了两个图像的邻接，允许控制每个图像相对于另一个图像所占用的屏幕百分比，保持它们的尺寸，并在屏幕边缘裁剪它们。然而，两个图像都在其屏幕区域内居中，并且每个图像占用的屏幕宽度必须明确设置为一个值，而不是一个弹性(相对)量。

解决方案

以下似乎产生了所需的结果，但我不确定这是否是最佳解决方案:

<View style={{flex: 1, flexDirection: 'row'}}>
  <Image style={{width:1000, transform: [{translateX: -700}]}}
    source={require('./image.jpg')} />
  <Image style={{width:1000, transform: [{translateX: -700}]}}
    source={require('./image.jpg')} />
</View>

示例中的图像宽度为 1000，“translateX: -700”导致左侧图像消耗 300，右侧图像消耗剩余部分。

Answer 1

只需在图像样式中使用flex:1

<View style={{flex: 1, flexDirection: 'row'}}>
  <Image style={{flex: 1}}
    source={require('./image.jpg')} />
  <Image style={{flex: 1}}
    source={require('./image.jpg')} />
</View>