如何定制地定位ImageBackground的图像

Question

我在整个屏幕上有一个ImageBackground，我正试图将图像，这是更大的，向左移动。当我试图使用left: -100定位图像时，就会发生这种情况(下图)。ImageBackground被移动，但作为一个整体移动。我需要的只是移动底层的图片，而不是集成在View中的ImageBackground。如何才能做到这一点？

造型

bgImageContainer: {
    flex: 1
},
bgImage: {
    left: -100
}

码

const screenSize = {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height - StatusBar.currentHeight
    };
    return (
<ImageBackground
            source={bgImage}
            resizeMode="cover"
            style={{ ...screenSize, ...styles.bgImageContainer }}
            imageStyle={styles.bgImage}
        >
            {/* content */}
        </ImageBackground>
);

​

​

Answer 1

尝试这个工作-绕过

<View style={{ ...screenSize, ...styles.bgImageContainer }}>
    <Image source={bgImage} style={styles.bgImage} resizeMode="cover"/>
    {/* content */}
</View>

造型：

bgImageContainer: {
    flex: 1
},
bgImage: {
    position:'absolute',
    width:SCREEN_WIDTH-100,
    height: SCREEN_HEIGHT,
    alignSelf:'flex-end' // if this not work make width full and add margin
}

Answer 2

用SafeAreaView组件包装它

import { SafeAreaView } from "react-native";
  
<SafeAreaView>
            <ImageBackground
            source={bgImage}
            resizeMode="cover"
            style={{ flex:1 }}
            imageStyle={styles.bgImage}
        >
            {/* content */}
        </ImageBackground>
</SafeAreaView>