Question

我希望将一个元素重叠到图像中。我是反应原生的新手，但可以用3行代码在CSS中做到这一点：

容器处于相对位置。绝对位置+底部的元素：20px。

这是我的反应原生代码和它的外观截图。

     <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置于绝对位置。但要显示它你必须设置一个高度。然后你有一个白色空间的全宽和设置的高度与右边的图标。这会将列表向下推，并增加一个很大的空白区域。

还有其他选择吗？

干杯

Answer 1

将css属性position: 'absolute'添加到要重叠的元素。

Answer 2

我建议您将图片和图标包装在div中，然后使用位置 css

Stack Snippet

.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>

在React Native上重叠一个图标

2 个答案: