当屏幕尺寸不同时，我应该如何处理绝对位置？

问题描述

我想在 react-native 中使用 imagebackground 在特定位置显示文本。

当使用resize mode as contains时，如何为不同的屏幕尺寸指定不同的绝对位置？

https://i.stack.imgur.com/HRUwn.png

 <imagebackground
      source={require("../../assets/image.png")}
      style={{ width: "100%",height: "100%",position: "relative" }}
      resizeMode="contain"
      onLayout={(event) => this.setLayout(event.nativeEvent.layout)}
    >
      <Text
        style={{
          position: "absolute",left: 90,top: 300,}}
      >
        Text_1
      </Text>
      <Text
        style={{
          position: "absolute",left: 280,}}
      >
        Text_2
      </Text>
    </imagebackground>

解决方法

使用维度给出左右位置。示例如下，

import { Dimensions } from 'react-native';

const window = Dimensions.get('window');

<View style={{
      flexdirection:'row',justifyContent:'space-between',marginLeft:(window.width)*0.3,marginRight:(window.width)*0.5,top:(window.height)*0.25,position: "absolute",}}>
 <Text>Text One </Text>
 <Text>Text Two </Text>
</View>