React原生超大图像定位

我有两张图片，我想用React Native水平放置。我想控制每个图像相对于另一个图像消耗的屏幕的百分比。图像一起会大于可用的水平屏幕空间。我想保持它们的原始尺寸，并简单地将它们裁剪在屏幕的边缘。React原生超大图像定位

这里是我怎么想的两个图像出现，与超出屏幕显示的图像的其他部分快速样机被裁剪：

我已经试过各种方法，但似乎没有任何工作。任何想法将不胜感激。

EDIT 一种方法，其是通过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，右图像剩余。

来源

2016-10-26 Sivart

你有没有尝试过这样的：

设置图像的宽度/高度，并使用柔性：1，flexDirection：“行”（上封装了图像视图）对齐图像彼此相邻。只是做flexDirection：'行'将水平对齐项目。您需要调整宽度/高度，以便图像不占据整个屏幕。

让我知道如何继续下去

编辑：相反，设置宽度的，也许你可以使用左，右左图像向左移动50％及右影像向右移动50％？

来源

2016-10-26 13:59:17 jhack

将此问题更新为我尝试过的结果和结果之一。 – Sivart

React原生超大图像定位

回答

相关问题