ネイティブ絶対配置が機能しない場合に対応

Question

以下のコードのマイボタンが絶対的に配置されていますが、動作しません。それは含まれているビュー内のスペースを占めており、そのイメージがそのビューの下にあることを許可していません。

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

ボタンがピンクビットです：

ボタンは、画像の右上隅にする必要があり、それはキャンセルボタンです。画像はボタンの右端にあるはずです。私は前に反応するネイティブでは働かない絶対的なポジショニングを経験しました。これはバグですか、それとも間違っていますか？

画像のスタイル：

avatar: { 
    width: 100, 
    height: 100 
    } 

Answer 1

これは働いていた

<Image> 
    <Button /> 
</Image