React Native ScrollView 与相对于屏幕大小的绝对定位的子项

Question

我有一个水平的 ScrollView 组件，它在 React Native 中包裹了整个屏幕，它的第一个子组件是一个占据整个设备高度的图像，并延伸到设备宽度之外。我试图在背景图像中绝对定位元素，以便它们在不同设备上始终处于与背景相同的相对位置，但我不知道如何。任何帮助将不胜感激。

当前代码示例：

<View style={styles.container}>
  <ScrollView horizontal={true} bounces={false}>
    <ImageBackground style={styles.backgroundImage}>
      <Element style={{position: "absolute", top: "30%", left: "50%"}}>
    </ImageBackground>
  </ScrollView>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: SCREEN.height,
  },
  backgroundImage: {
    height: SCREEN.height,
    width: SCREEN.height * 1.125,
  },
})

问题是具有绝对定位的元素最终会在不同设备上的背景图像的不同位置。有可能解决这个问题吗？

Answer 1

问题在于<ImageBackground /> 类。根据 React-Native 文档，图像适合整个可用空间，而不会丢失原始图像的宽高比，这会导致图像缩放，在这种情况下，开发人员可以控制缩放因子。

<Element style={{position: "absolute", top: "30%", left: "50%"}}>

对于上面的Element类，你只能在使用%和position: absolute时将其定位在屏幕的宽度和高度上。

总而言之，您的 Elements 类样式代码是完美的，问题在于 <ImageBackground /> 类。

而且所有设备都有不同的纵横比，因此使用这个：

    width: SCREEN.height * 1.125,

可能不是最好的选择。

你可以这样做：

import {View, ScrollView, Dimension} from react-native;
const {width: viewportWidth, height: viewportHeight} = Dimensions.get('window');

<View style={styles.container}>
   <ScrollView horizontal={true} bounces={false}>
      <ImageBackground style={styles.backgroundImage}>
         <Element style={{position: "absolute", top: "30%", left: "50%"}}>
      </ImageBackground>
   </ScrollView>
</View>


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    height: viewportHeight,
    width: viewportWidth,
  },
})

我希望这是您正在寻找的。干杯伙伴！