首页 文章

React Native超大图像定位

提问于
浏览 次
0

我想要使用React Native水平放置两个图像 . 我想控制每个图像相对于另一个图像消耗的屏幕百分比 . 图像将一起大于可用的水平屏幕空间 . 我想保持原始尺寸，只需将它们裁剪在屏幕边缘即可 .

这是一个快速模型，显示我希望如何显示两个图像，所显示的图像的其他部分延伸到屏幕之外：

enter image description here

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

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>

这会产生：
enter image description here

这实现了两个图像的邻接，允许控制每个图像相对于另一个图像所消耗的屏幕的百分比，保持它们的尺寸，并将它们裁剪在屏幕的边缘 . 然而，两个图像都在其屏幕区域内居中，并且每个图像所消耗的屏幕宽度必须明确地设置为值而不是弯曲（相对）量 .

Solution

以下似乎产生了预期的结果，但我不确定它是否是最佳解决方案：

<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，右图像消耗余数 .

javascript android ios reactjs react-native

2 回答

  • 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>
    回复于
  • 0

    你试过这个：

    设置图像的宽度/高度并使用flex：1，flexDirection：'row'（在包装图像的视图上）以使图像彼此相邻 . 只需执行flexDirection：'row'将水平对齐项目 . 您需要调整宽度/高度，以使图像不占用整个屏幕 .

    让我知道这是怎么回事

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

    回复于

相关问题