如何在不同设备上使用绝对 position 将图像对齐到另一个上方

Question

当背景图像可以通过不同的设备分辨率调整大小时，是否可以使用绝对 position 对齐图像并保持相同的 position？ 还有其他解决方案吗？

这是目前我正在尝试解决的问题：

414 x 896px 设备上的图像

360 x 672 像素设备上的图像

这就是我想要做的：

    <View style={{position: 'relative'}}>
      <Image
        resizeMode="contain"
        style={{flex: 1, flexGrow: 1}}
        source={Assets.Mobile.RemoteControl} // The background image with 3 icons
      />
      <Image
        style={{
          position: 'absolute',
          top: '6.8%',
          left: '19%',
        }}
        source={Assets.Mobile.RemoteRectangleButtonBorder}  // The rounded border
      />
    </View>

Answer 1

使用 flexDirection: 'row' 为按钮创建一个容器，然后将按钮创建为单个按钮而不是一张图片

// Container
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>

  // Button 1
  <View style={{justifyContent: 'center', alignContent: 'center'}}>
  // Big ring
  <Image source={{uri or require: "url1"}} style={{position: 'absolute', height: xy%, width: ab%}}/>
  // Smal Ring
  <Image source={{uri or require: "url1"}} style={{position: 'absolute'}}/>
  </View>

  // Button 2
  <View>
  // House
  <Image source={{uri or require: "house"}} style={{position: 'absolute', height: xy%, width: ab%}}/>
  </View>

  // Button 3
  <View>
  // List
  <Image source={{uri or require: "list"}} style={{position: 'absolute', height: xy%, width: ab%}}/>
  </View>

</View>

划分为单独的视图使我们能够将嵌套的较小视图内的图像居中。