在另一个上面叠加或添加视图：React Native

Question

我试图在<Image>上添加<MapView>。应该看起来像这样 -

这是我的代码 -

<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上，重叠视图以render方法中指定的相同顺序显示（如果您有两个视图，则第二个视图将是最可见的视图）。在Android上，重叠的视图，越界，将被切断。

无论如何，在您的情况下，您不能只添加高度和宽度的图像。 你必须提供这个的处置。

我建议你添加一些风格：

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

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