別のものの上にビューをオーバーレイまたは追加する：ネイティブの反応

Question

<MapView>に<Image>を追加しようとしています。このようになるはずです - 私はこのコードからトップ上の任意のビューが届かない

<MapView 
    mapType='standard' 
    style={styles.map} 
    region={{ 
     latitude: selectedLoc.location.latitude, 
     longitude: selectedLoc.location.longitude, 
     latitudeDelta: 0.005, 
     longitudeDelta: 0.005 
    }} 
    onRegionChange={() => { } } 
    onRegionChangeComplete={() => { } } 
    showsUserLocation={false} 
    zoomEnabled={false} 
    draggable={false} 
    annotations={[{ 
     longitude: selectedLoc.location.latitude, 
     latitude: selectedLoc.location.longitude, 
     title: selectedLoc.title 
    }]} 
    initialRegion={{ 
     latitude: selectedLoc.location.latitude, 
     longitude: selectedLoc.location.longitude 
    }}> 
    <Image 
     style={{ 
      width: 50, 
      height: 50, 
     }} 
     resizeMode={"contain"} 
     source={{ uri: 'https://unsplash.it/50/50/?random' }} 
     /> 
</MapView> 

-

はここに私のコードです。あなたに教えてください

Answer 1

まず初めに、ネイティブ・リアクション・ディスポジションに関するいくつかのルールを知っておく必要があります。 iOSでは、オーバーラップするビューは、レンダリングメソッドで指定された順序と同じ順序で表示されます（2つのビューがある場合は、2番目のビューが最も表示されます）。アンドロイドでは、オーバーラップしているビューが範囲外にカットされます。

とにかく、あなたの場合、高さと幅の画像を追加するだけではありません。 あなたはこれの処分を提供しなければなりません。

私はあなたには、いくつかのスタイルを追加することをお勧め：

{ position: 'absolute', 
    bottom: 10, 
    right: 10, 
    width: 50, 
    height: 50 } 

は、あなたのイメージは、地図の右下に提示する必要がありますこのスタイルを使用します。