在另一個頂部覆蓋或添加視圖：React Native

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

首先，你必須知道一些有關react-native視圖處置的規則。在iOS上，重疊視圖以渲染方法中指定的相同順序呈現（如果您有兩個視圖，則第二個視圖最可見）。在Android上，重疊視圖，越界，將被切斷。

無論如何，在你的情況下，你不能只是添加一個高度和寬度的圖像。 你必須提供這一個的處置。

我建議你添加一些樣式：

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

使用這種風格你的形象應該在地圖的右下角呈現。