javascript - react native 绝对定位不起作用

Question

我在下面代码中的按钮是绝对定位的，但它不起作用。它正在占用其包含 View 中的空间，并且不允许图像位于其下方。

<View style={{
  justifyContent: 'flex-end',
  alignItems: 'center',
  flexDirection: 'row',
  flex: 0.5,
  borderRadius: 8
}}>

  <Image
    style={mapStyles.avatar}
    source={props.image} />

  <Button
    small
    icon
    style={{
      positon: 'absolute',
      right: -5,
      top: -5,
      width: 20,
      height: 20,
      zIndex: 50,
      elevation: 10,
      borderRadius: 10,
      backgroundColor: '#FF3B3F',
      shadowColor: '#000000',
      shadowOffset: {
        width: 0,
        height: 1
      },
      shadowRadius: 1,
      shadowOpacity: 1.0
    }}
    onPress={() => props.updateImage(null)}>
    <Icon style={locationStyle.deleteLocationButtonIcon}
      name="close-o" size={22} color="#9E9E9E" />
  </Button>

</View>

按钮是粉色位:

按钮需要在图片的右上角，是一个取消按钮。图像应该位于按钮所在的最右侧。我以前经历过绝对定位在 React Native 中不起作用。这是错误还是我做错了？

图像样式:

  avatar: {
    width: 100,
    height: 100
  }

Answer 1

尝试将按钮嵌套在图像中，例如

<Image>
  <Button />
</Image