图像背景使用

Question

我正在使用 react-native 开发一个移动应用程序项目。我在做个人资料屏幕样式时卡住了。我希望它看起来像这张图片，但我不知道如何像这样布置图片背景和头像位置。如果我选择图像的高度和宽度，图像将获得其高度的一半，如果选择 flex，我无法将头像放置在图像背景中。

Answer 1

您尝试过在 ImageBackground 风格中使用 height: '100%' 和 width: '100%' 吗？

Answer 2

你需要在你的 ImageBackground 中使用 resizeMode="cover" 这将从中心阅读文档中调用图像 here

并将配置文件 image 放入 ImageBackground 和 position : 'absolute'

设置status bar props隐藏状态栏背景色

这是代码

第一个import { View, ImageBackground, Image, StatusBar } from "react-native";

<View style={{flex : 1}}>

        <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent/>

        <ImageBackground
            style={{width : '100%', aspectRatio : 1.6}}
            resizeMode="cover"
            source={{uri : /*your cover image url here*/}}>

            <View style={{
                position : 'absolute',
                bottom : -50,
                height : 100,
                width : 100,
                borderRadius : 50,
                overflow : 'hidden',
                alignSelf : "center",
                borderWidth : 1,
                borderColor : "#aaa"}}>

                <Image
                    source={{uri : /*your profile image url here*/}}
                    style={{height : 100, width : 100}}/>

            </View>

        </ImageBackground>
    </View>

这是我的结果

图像背景使用

Image Background Usage

avatar

react-native

imagebackground