如何解决图像背景使用
我正在使用 react-native 开发一个移动应用项目。我在做个人资料屏幕样式时卡住了。我希望它看起来像这个图像,但我不知道如何像这样布局图像背景和头像位置。如果我选择图像的高度和宽度,图像将获得其高度的一半,如果选择 flex,我无法将头像放在图像背景内。
解决方法
您是否尝试过在您的 height: '100%'
风格中使用 width: '100%'
和 ImageBackground
?
您需要在 resizeMode="cover"
中使用 ImageBackground
这将从中心阅读文档中调用图像 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>
这是我的结果
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。