bounty将在5天后过期。回答此问题可获得+200声望奖励。Hello World正在查找规范答案：请提供一个解决方案，并举例说明如何将子组件图像放置在ImageBackground的相应位置，而ImageBackground在平板设备的所有视口中均处于相同位置。
我正在做一个react原生应用程序，其中有一个左部分和右部分。
左侧部分由flex:0.7组成，右侧部分由flex:0.2组成。
在左侧部分中，我有一个容器，其中有一个ImageBackground，看起来像一个电路 backbone
在里面，我需要将子组件放置在相应的位置。
预期结果：
我尝试过的事情：
纯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* 和 * 宽度：小行星10
我主要是为所有高度和宽度的平板电脑屏幕，但在纯HTML和CSS的方式，这是响应，但在平板电脑屏幕的React Native，它没有响应。
请帮助我解决这个问题，使position:absolute元素响应，并位于同一位置，在所有屏幕的没有失真。
- 注：* 编辑了我的问题，提到这个实现是在react-native中发生的。
5条答案
按热度按时间yzxexxkh1#
试试这个：
yqkkidmi2#
作为一个选项。但是，请记住，这是一个硬编码坐标的构造。当您更改带有背景图像的容器的大小时，您还需要更改嵌套元素的位置。
h9a6wy2h3#
也许吧？
hfsqlsce4#
这里是解决方案的flexbox，而不是使它的位置：绝对的要求。
smdnsysy5#
因为它是位图图像，我建议回到每个元素的真实的大小，并根据它们的实际大小来定位它们。所有这些都是以像素为单位。如果真的需要调整外部容器的大小，或多或少可以做相同的事情，采取每个元素的百分比，关于大的一个和它们的位置左上角相同的计算...