在另一个视图上叠加或添加视图：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>

我在这段代码中没有得到任何视图。请告诉我原因。

- shubhsin

---

现在的样子如何？您可以附上一些截图吗？ - Ivan Chernykh

只有地图可见 @Cherniv - shubhsin

嗨@shubhsin，你解决了这个问题吗？ - Pasindu Weerakoon

Answer 1

首先，您需要了解一些关于 React Native 视图位置的规则。在 iOS 上，重叠的视图按照 render 方法中指定的顺序呈现（如果您有两个视图，则第二个视图将是最可见的）。在 Android 上，超出边界的重叠视图会被裁剪掉。

无论如何，在您的情况下，您不能只添加具有高度和宽度的图像。您还需要提供此图像的位置。

我建议您添加一些样式：

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

使用这种样式，您的图像应该显示在地图的右下角。

- Roberto Conte Rosito