反应本机绝对定位不起作用

时间:2017-05-18 09:25:36

标签: javascript css reactjs react-native react-native-android

下面代码中的我的按钮绝对定位,但它不起作用。它占据了包含视图的空间,并且不允许图像在其下方。

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

按钮为粉红色位:enter image description here

按钮需要位于图像的右上角,这是一个取消按钮。图像应位于按钮所在的最右侧。我经历过绝对的定位而不是以前做过反应。这是一个错误还是我做错了?

图片样式:

  avatar: {
    width: 100,
    height: 100
  }

1 个答案:

答案 0 :(得分:1)

尝试将按钮嵌套在图像中

<Image>
  <Button />
</Image