reagieren native absolute Positionierung funktioniert nicht

Question

Mein Button in der Code unten ist absolut positioniert, aber es funktioniert nicht. Es nimmt Platz in seiner enthaltenden Ansicht ein und lässt das Bild nicht darunter liegen.

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

Die Taste ist der rosa-Bit:

Die Schaltfläche in der rechten oberen Ecke des Bildes sein muss, ist es eine Taste. Das Bild sollte ganz rechts neben dem Button sein. Ich habe erlebt, dass absolute Positionierung nicht in der ursprünglichen Reaktion funktioniert. Ist das ein Fehler oder mache ich es falsch?

Bild Stile:

avatar: { 
    width: 100, 
    height: 100 
    } 

Answer 1

Versuchen Sie, Ihre Taste innerhalb des Bildes wie

<Image> 
    <Button /> 
</Image