位置：react native中的绝对问题

问题描述 投票：0回答：6

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

左侧部分由 

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

问题：

实施后，

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

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

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

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

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

注意： 编辑我的问题以提及此实现是在 react-native 中发生的。

android css ios react-native tablet
6个回答
1
投票

试试这个：

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

0
投票

作为一个选项。但是，请记住，这是一个具有硬编码坐标的结构。当您使用背景图像更改容器的大小时，您还需要更改嵌套元素的位置。

<style>
  .container {
    background-image: url("https://i.stack.imgur.com/AfygH.png");
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border: 2px solid crimson;
    margin: auto;
    position: relative;
  }
  
  .container div {
    border: 2px solid orange;
    position: absolute;
  }
  
  .coil {
    top: 256px;
    left: 36px;
  }
  
  .evaporator {
    top: 40px;
    left: 296px;
  }
  
  .compressor {
    top: 272px;
    left: 333px;
  }
</style>
<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>

0
投票

也许是这样？

<style>
  .container {
    background-image: url("https://i.stack.imgur.com/AfygH.png");
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border: 2px solid crimson;
    margin: auto;
    display: flex;
    align-items: center;
    /* position: relative; */
  }
  
  .container div {
    border: 2px solid orange;
    /* position: absolute; */
  }
  
  .coil {
    margin-top: 111px;
    margin-left: 33px;
  }
  
  .evaporator {
    margin-top: -343px;
    margin-left: 140px;
  }
  
  .compressor {
    margin-top: 170px;
    margin-left: -49px;
  }
</style>
<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>

0
投票

这里是 flexbox 的解决方案，而不是根据要求将其设置为 position:absolute 。

.container {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    width: 700px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.coil, .evaporator, .compressor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evaporator {
    width: 80px;
    height: 80px;
    margin-top: 23px;
    margin-left: 140px
}

.coil {
    width: 150px;
    height: 150px;
    margin-top: 60px;
    margin-right: 231px;
}

.compressor {
    width: 80px;
    height: 80px;
    margin-bottom: 88px;
    margin-left: 218px;
    margin-top: -90px;
}
<div class="container">
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
</div>

0
投票

因为它是位图图像，我建议回到每个元素的实际大小，并根据它们的实际大小定位它们。所有这些都以像素为单位。如果真的需要调整外部容器的大小，可以或多或少地对每个元素的大元素及其左上角的位置进行相同类型的计算...

.container {}

.circuit {
  position: relative;
  width: 100%;
  height: 100%;
}

.circuit>img {
  /* 688 x 401 */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 688px;
  height: 401px;
}

.coil {
  /* 120 x 90 */
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 90px;
  left: 150px;
  top: 199px;
}

.evaporator {
  /* 80 x 70 */
  position: absolute;
  z-index: 1;
  left: 375px;
  top: 25px;
  width: 80px;
  height: 70px;
}

.compressor {
  /* 90 x 120 */
  position: absolute;
  z-index: 1;
  left: 405px;
  top: 213px;
  width: 90px;
  height: 120px;
}
<div class="container">
  <div class="circuit">
    <img src="https://i.stack.imgur.com/AfygH.png" alt="circuit" />
    <div class="evaporator">
      <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
    </div>
    <div class="coil">
      <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
    </div>
    <div class="compressor">
      <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
    </div>
  </div>
</div>

0
投票

这是另一种方式。

.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 400px;
background-position: center;
background-size: contain;
width: 700px;
background-repeat: no-repeat;
 }
.coil {
position: absolute;
top: 204px;
left: 180px;
zoom: 100%;    }
.evaporator {
position: absolute;
top: 26px;
left: 320px;
zoom: 115%;
}
.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>;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.