React Native 如何在不同设备上使用绝对位置对齐图像

fae0ux8s 于 2023-11-21 发布在 React

关注(0)|答案(1)|浏览(146)

当背景图像可以通过不同的设备分辨率调整大小时，是否可以使用绝对位置对齐另一个图像并保持相同的位置？是否有其他解决方案？
这是我目前正在努力解决的问题：

414 x 896 px设备上的图像

的数据

360 x 672 px设备上的图像

的数据
这就是我想做的

<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>

字符串

react-native

来源：https://stackoverflow.com/questions/65226661/how-to-align-image-above-another-using-absolute-position-on-different-devices

1条答案

按热度按时间

rnmwe5a21#

使用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>

字符串
划分为单独的视图使我们能够将图像居中放置在嵌套的较小视图中。

赞(0）回复(0）举报 2023-11-21

我来回答

React Native 如何在不同设备上使用绝对位置对齐图像

1条答案

相关问题

热门标签

最新问答