在另一个之上叠加或添加视图：React Native答案

【问题标题】：Overlaying or adding a view on top of another : React Native在另一个之上叠加或添加视图：React Native
【发布时间】：2016-05-26 11:01:19
【问题描述】：

我正在尝试在 <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>

我没有从这段代码中得到任何关于顶部的视图。请告诉我

【问题讨论】：

现在怎么样了？可以附上截图吗？
只有地图可见@Cherniv
嗨@shubhsin，你有解决方案吗？

标签： android ios reactjs react-native

【解决方案1】：

首先，您必须了解一些有关 react-native 视图处置的规则。在 iOS 上，重叠视图以在渲染方法中指定的相同顺序呈现（如果您有两个视图，第二个将是最可见的）。在 android 上，超出范围的重叠视图将被切断。

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

我建议你添加一些样式：

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

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

【讨论】：