android - 在另一个 : React Native 之上叠加或添加 View

标签 android ios reactjs react-native

我正在尝试添加 <Image><MapView> .应该看起来像这样 -

enter image description here

这是我的代码 -

<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>

我没有从这段代码中获得任何顶部 View 。请告诉我

最佳答案

首先,你必须了解一些关于react-native View 配置的规则。在 iOS 上,重叠 View 以渲染方法中指定的相同顺序呈现(如果您有两个 View ,第二个将是最可见的)。在 Android 上,重叠的 View 、超出范围的 View 将被切断。

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

我建议你添加一些样式:

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

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

关于android - 在另一个 : React Native 之上叠加或添加 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37458969/

相关文章:

ios - 当使用 CGContext 缩放到小尺寸时,CGImage 的像素数据不完整

reactjs - Flatlist scrollToIndex with Hooks useRef

javascript - 使用 React、Meteor 和 Simple Schema 创建动态单选按钮(使用 pup 样板)

ios - 我如何知道几何体 (SCNNodes) 何时位于 View 的边缘?

ios - 从 plist 加载 NSMutableDictionary

javascript - Firebase 在 React Native 数据获取中返回 "undefined"值

android - 如何通过代码将 ImageView 设置在布局的中心?

java - fragment 子类中的 android getMenuInflater() - 无法解析方法

android - 使用 2 个 soundpool 会导致内存泄漏吗?

android - AT 命令和 SAMSUNG 调制解调器