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宽，＆＃34; translateX：-700＆＃34;导致左图像消耗300而右图像消耗剩余。

Answer 1

只需在图片的样式中使用<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" /> <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script> <title>billboard.js</title> </head> <body> <div id="chart"></div> <button onclick="toggle(100, 300)">one</button> <button onclick="toggle(300, 100)">two</button> </body> </html>

flex:1

Answer 2

你试过这个：

设置图像的宽度/高度并使用flex：1，flexDirection：＆＃39; row＆＃39; （在包装图像的视图上）将图像彼此对齐。只是做flexDirection：＆＃39; row＆＃39;将水平对齐项目。您需要调整宽度/高度，以便图像不会占据整个屏幕。

让我知道这是怎么回事

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

React Native超大图像定位

2 个答案: