React Native Maps如何在Marker上方显示常驻文字，添加Text后Marker消失求助

当你为 <MapView.Marker> 传入自定义子组件时，框架会直接替换默认的系统Marker图标。你当前的代码中仅包含一个无宽高的View和绝对定位的Text，没有可渲染的实体Marker内容，因此整个Marker会消失。

场景1：保留默认Marker图标，同时在上方显示文字 #

直接在自定义容器里同时放入文字和Marker图标即可，示例代码如下：

<MapView
  style={styles.map}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  <MapView.Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
  >
    <View style={{ alignItems: 'center' }}>
      <Text
        style={{
          backgroundColor: 'white',
          paddingHorizontal: 4,
          paddingVertical: 2,
          borderRadius: 4,
          fontSize: 12,
          color: 'black',
          marginBottom: 4,
        }}
      >
        标记文字
      </Text>
      <!-- 此处可替换为你自己项目的Marker图标资源 -->
      <Image 
        source={require('react-native-maps/lib/assets/standard_pin.png')} 
        style={{ width: 30, height: 30 }} 
        resizeMode="contain"
      />
    </View>
  </MapView.Marker>
</MapView>

场景2：不需要默认图标，完全自定义Marker样式 #

可以自己绘制Marker样式搭配文字，示例代码如下：

<MapView.Marker
  coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
>
  <View style={{ alignItems: 'center' }}>
    <Text style={{ backgroundColor: '#fff', paddingHorizontal: 3, paddingVertical: 1, borderRadius: 3, fontSize: 12, color: '#000' }}>
      自定义文字
    </Text>
    <!-- 自定义Marker点 -->
    <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: 'red', marginTop: 2 }} />
  </View>
</MapView.Marker>

• 自定义Marker的外层容器必须有明确的布局尺寸或者内部有占空间的子元素，否则所有内容都会无法渲染
• 尽量不要给文字设置无约束的绝对定位，如果必须使用绝对定位，请先给外层容器设置固定宽高
• 文字建议加背景色，避免和地图底色重叠导致看不清

内容的提问来源于stack exchange，提问作者Generic_coder