在 React Native 上重叠一个图标答案

【问题标题】：Overlapping an icon on React Native在 React Native 上重叠一个图标
【发布时间】：2018-06-28 14:16:08
【问题描述】：

我想让一个元素重叠到本机反应的图像上。我是 react native 的新手，但可以在 CSS 中用 3 行代码做到这一点：

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

这是我的 react native 代码和它的截图。

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

和样式表：

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。但是要显示它，您必须设置一个高度。然后你有一个空白的全宽和设置的高度，右侧的图标。这会将列表向下推并添加一个大空白。

还有其他选择吗？

干杯

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

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

【讨论】：

这将起作用并调整重叠视图，您可以像在 css 中一样使用顶部、底部、左侧和右侧进行调整
所以你的意思是像iconContainer: { alignSelf: 'flex-end', right: 10, top: 210, position: 'absolute' }...但是按钮在列表下面，仍然需要zindex。我也不是特别喜欢这种方式。这意味着如果我更改照片的高度，我也必须更改 top: 210 的值。我希望它相对于元素的自然 DOM 位置，它应该在图片下方和列表上方。
尝试在所有其他元素的最底部添加“笔”编辑图标，并提到上面的 css 属性。您也可以尝试将marginTop: any size you prefer 添加到相同的图标样式中。

【解决方案2】：

我建议你将 image 和 icon 包装在一个 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>

【讨论】：

问题是关于 react native 这看起来像 react for web