我有两个图像,我想使用 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,右侧图像消耗剩余部分。
最佳答案
只需在图像样式中使用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>
关于javascript - React Native 超大图片定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40260687/