React Native mapbox | react-native-mapbox-gl |Comment changer l'image de l'annotation de point et le callout n'est pas touchable dans Android ?

Question

J'essaie de changer l'icône par défaut de l'épingle Mapbox sur Android car dans iOS j'obtiens le résultat attendu. Problème

Impossible de modifier l'icône d'annotation de point (au format PNG). L'image du texte ne se charge pas non plus (en utilisant le format PNG). Impossible de cliquer sur la légende. Tous les problèmes ci-dessus, je suis confronté dans Android seulement, iOS fonctionne bien.

 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>
    );
  }
}

Cela fonctionne bien sur iOS. Résultat iOS Android - Question

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>