React Native mapbox | react-native-mapbox-gl |如何更改PointAnnotation图片和标注在Android中不可触摸？

问题描述

我尝试更改Android上的默认MapBox图钉图标，就像在iOS中一样，我得到了预期的结果。 问题

无法更改PointAnnotation图标（使用PNG格式） 标注图像也未加载（使用PNG格式） 无法点击标注。 我仅在Android上遇到过上述所有问题，iOS正常运行。

 import React from 'react';
    import {
      View,Image,} from 'react-native';
    import MapBoxGL from '@react-native-mapBox-gl/maps';
    
const currentLatLng = [
    [-74.00597,40.71427]
  ];

class BugReportExample extends React.Component {
  render() {
    return (
    View style={{flex: 1}}>
        <MapBoxGL.MapView
          ref={c => (this._map = c)}
          logoEnabled={false}
          style={{flex: 1}}>
          <MapBoxGL.Camera
            ref={c => (this.camera = c)}
            zoomLevel={14}
            centerCoordinate={currentLatLng}
          />
          {/* User location */}
          <MapBoxGL.PointAnnotation
            key={'9090'}
            ref={ref => (this.userAnnotationRef = ref)}
            id={'9090'}
            coordinate={currentLatLng}
            title="">
            <View style={{ width: 45,height: 45,alignItems: 'center',justifyContent: 'center',overflow: 'hidden',}}>
              <Image
                source={{uri:'https://reactnative.dev/img/tiny_logo.png'}}
                resizeMode={'contain'}
                style={{height: wp('10%'),width: wp('10%')}}
               onLoad={() => this.userAnnotationRef.refresh()}
              />
            </View>
            <MapBoxGL.Callout title={'You'} />
          </MapBoxGL.PointAnnotation>
        </MapBoxGL.MapView>
      </View>
    );
  }
}

在iOS上运行正常。 iOS结果

Android-问题

解决方法

const ImageMarker = ({ children }) =>
  Platform.select({
    ios: children,android: (
      <Text
      style= {{
    lineHeight: 60,// there is some weird gap,add 40+ pixels
    // backgroundColor: '#dcdcde',}}>
    { children }
    < /Text>
  ),});

<ImageMarker>
  <Image
    source={IMAGE_LINK} 
    style={{width: 45,height: 55}}
  />
</ImageMarker>