立场：React Native中的绝对问题

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

import React from 'react';
import { View, Image, StyleSheet, Text, ImageBackground } 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;

.container {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    width: 700px;
}
.coil {
    position: absolute;
    top: 204px;
    left: 180px;
    zoom: 101%;    }
.evaporator {
    position: absolute;
    top: 26px;
    left: 320px;
    zoom: 121%;
}
.compressor {
    position: absolute;
    top: 220px;
    left: 422px;
    zoom: 100%;
}

<div class="container">
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>;