在React Native上重叠图标
提问于 2018-01-19 10:51:54
我希望在react原生中有一个元素重叠到一个图像上。我是react原生新手，但我可以用CSS在3行代码中做到这一点：
相对位置的容器。绝对位置+底部的元素: 20px。
这是我的react原生代码和它的屏幕截图。
<ScrollView style={styles.container}>
<Image
style={styles.profileImage}
source={{uri: blabla}}
/>
<View style={styles.iconContainer}>
<ActionIcon
name={'mode-edit'}
color={colorBrand}
onPress={() => console.log('test')}
/>
</View>
<List containerStyle={styles.list}>
<ListItem
title={'Account Settings'}
/>
<ListItem
title={'Notifications'}
/>
<ListItem
title={'Terms & Conditions'}
/>
<ListItem
title={'Privacy Policy'}
/>
<ListItem
title={'Log Out'}
/>
</ScrollView>和StyleSheet：
const styles = StyleSheet.create({
container: {
flex: 1
},
profileImage: {
height: 250
},
list: {
borderTopWidth: 0,
flex: 1,
marginTop: 0
},
iconContainer: {
alignSelf: 'flex-end',
right: 10,
bottom: 40,
marginBottom: -60,
zIndex: 1
}
})所以它看起来是这样的：
所以看起来和我想要的一模一样。但我不喜欢那个zIndex，也不喜欢那个负面的bottomMargin。
我首先尝试使用相对位置中的iconContainer容器，然后尝试绝对位置中的iconContainer。但是要显示它，你必须设置一个高度。然后你就有了一个全宽的、高度和图标在右边的空白区域。这会将列表向下推，并添加一个大空格。
还有没有别的选择？
干杯
回答 2
Stack Overflow用户
发布于 2018-01-19 11:53:09
将css属性position: 'absolute'添加到要重叠的元素。
Stack Overflow用户
发布于 2018-01-20 15:04:34
我会建议你把你的图片和图标包装在一个div中，然后使用position css
堆栈代码段
.wrapper {
margin-bottom: 40px;
position: relative;
display: inline-block;
}
.wrapper i {
position: absolute;
right: 20px;
bottom: -25px;
width: 50px;
height: 50px;
background: #5ab985;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
.wrapper img {
display: block;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="wrapper">
<img src="http://lorempixel.com/200/200/sports">
<i class="material-icons">mode_edit</i>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48339404
复制
腾讯云开发者
