React Native 地图框 | react-native-mapbox-gl |如何更改PointAnnotation Image和Callout在Android中不可触摸？

Question

我正在尝试更改 Android 上的默认 Mapbox pin 图标，就像在 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 - 问题

Answer 1

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>

Answer 2

在将图像分配给 PointAnnotation 之前加载图像。

const [imagesLoaded, setImagesLoaded] = useState(false);

setTimeout(() => {
    setImagesLoaded(true);
}, 500);

const Example = () => {
  render() {
    return (
    {imagesLoaded ? 
        // Your mabox code with PointAnnotation
    :
     <Image
       source={{uri:'https://reactnative.dev/img/tiny_logo.png'}}
       resizeMode={'contain'}
       style={{height: wp('10%'), width: wp('10%'), opacity:0}}
     />
    );
  }
}