图像背景使用答案

【问题标题】：Image Background Usage图像背景使用
【发布时间】：2021-07-21 08:47:55
【问题描述】：

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

【问题讨论】：

标签： react-native avatar imagebackground

【解决方案1】：

您需要在您的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>

这是我的结果

【讨论】：

【解决方案2】：

您是否尝试过在您的ImageBackground 样式中使用height: '100%' 和width: '100%'？

【讨论】：