如何使用 React Native 使位置：绝对元素适合视图？

Question

我正在制作一个反应本机应用程序，其中有一个左右部分。

左侧部分由

flex:0.7

组成，右侧部分由

flex:0.2

组成。

在左侧部分我有一个容器，里面有一个

ImageBackground

看起来像电路骨架

在里面我需要将子组件放在相应的位置。

预期结果：

我试过的东西：

纯 HTML 和 CSS 方式：（按预期工作）

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
}

.bg-img {
  display: block;
  width: 100%;
}

.coil {
  position: absolute;
  top: 49.55%;
  left: 24.3%;
  width: 17.4418605%;
}

.evaporator {
  position: absolute;
  top: 7.25%;
  left: 54.5%;
  width: 11.627907%;
}

.compressor {
  position: absolute;
  top: 53.15%;
  left: 59.2%;
  width: 13.0813953%;
}

.component img {
  display: block;
  width: 100%;
}

<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
      <img src="https://i.stack.imgur.com/AfygH.png" class="bg-img" />
      <div class="component coil">
        <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
      </div>
      <div class="component evaporator">
        <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
      </div>
      <div class="component compressor">
        <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
      </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

但是当我在 React Native 应用程序中这样做时，我尝试将其更改为 React Native 方式，例如，

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  leftSection: {
    flex: 0.7,
  },
  rightSection: {
    flex: 0.2,
    backgroundColor: '#ccc',
  },
  bgContainer: {
    position: 'relative',
    margin: 0,
  },
  bgImg: {
    width: '100%',
  },
  coil: {
    position: 'absolute',
    top: '49.55%',
    left: '24.3%',
    width: '17.4418605%',
  },
  evaporator: {
    position: 'absolute',
    top: '7.25%',
    left: '54.5%',
    width: '11.627907%',
  },
  compressor: {
    position: 'absolute',
    top: '53.15%',
    left: '59.2%',
    width: '13.0813953%',
  },
  componentImg: {
    width: '100%',
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.leftSection}>
        <View style={styles.bgContainer}>
          <ImageBackground
            source={{ uri: 'https://i.stack.imgur.com/AfygH.png' }}
            style={styles.bgImg}
          >
          <View style={styles.coil}>
            <Image
              source={{ uri: 'https://i.stack.imgur.com/SKUms.png' }}
              style={styles.componentImg}
            />
          </View>
          <View style={styles.evaporator}>
            <Image
              source={{ uri: 'https://i.stack.imgur.com/spv58.png' }}
              style={styles.componentImg}
            />
          </View>
          <View style={styles.compressor}>
            <Image
              source={{ uri: 'https://i.stack.imgur.com/fzSaH.png' }}
              style={styles.componentImg}
            />
          </View>
          </ImageBackground>
        </View>
      </View>
      <View style={styles.rightSection}>
        <Text>Right Section</Text>
      </View>
    </View>
  );
};

export default App;

问题：

实施后，

下面的屏幕截图是在屏幕视口中捕获的，高度：844 和宽度：1280

以下屏幕截图是在屏幕视口中捕获的，高度：552 和宽度：1024

我主要为所有高度和宽度的平板电脑屏幕制作这个，但是以纯 HTML 和 CSS 的方式，这是响应式的，但在平板电脑屏幕的反应本机中，它根本没有响应。

请帮助我解决这个问题，使

position:absolute

元素响应并位于所有屏幕的相同位置而不会失真。