Сложность реализации опоры привязки на пользовательском значке в React Native Maps

Question

Я пытаюсь отобразить настраиваемый значок png, закрепленный в нижней середине изображения (точки) в моем обзоре карты. Я создаю значок в другом файле с именем CustomIcon. js, как показано ниже:

import React from 'react';
import {
Image,
View,
} from 'react-native';
import MapView from 'react-native-maps';

export default class CustomIcon extends React.Component {
constructor(props) {
    super(props);

    const driver = this.props.driver ?
        this.props.driver :
        { uid: "noDriversPassed", 
            location: { latitude: 0, longitude: 0 }
        }


    const  coordinate = new MapView.AnimatedRegion({
        latitude: driver.location.latitude,
        longitude: driver.location.longitude,
        latitudeDelta: 0,
        longitudeDelta: 0,
    })
    this.state = {
        driver: driver,
        coordinate: coordinate,
    }
}

render() {
    return (
        <MapView.Marker.Animated
            coordinate={this.state.coordinate}
            anchor={{x: 1, y: .5}}
            ref={marker => { this.marker = marker }}
            style={{width: 50, height: 50}} >
            <Image
                source={require('../assets/images/PictureIcon.png')}
                style={{
                    width: 70,
                    height: 74.2,
                }} />

        </MapView.Marker.Animated>
    )
}
}

Фактический экран Mapview для моего приложения выглядит следующим образом:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import * as Permissions from 'expo-permissions';
import * as Location from 'expo-location';
import { createStackNavigator } from '@react-navigation/stack';

import CustomIcon from '../components/CustomIcon'
import { CurrentLocationButton } from '../components/CurrentLocationButton'

const RootStackNavigator = createStackNavigator(); // Nesting the page within a stack navigator fixes 
the double header issue

class App extends React.Component {
constructor(props) {
super(props);

this.state = {  
  region: null,    
}
this._getLocationAsync();
}

 _getLocationAsync = async () => {
   let { status } = await Permissions.askAsync(Permissions.LOCATION);
     if(status !== 'granted')
       console.log('Permission Denied');
   let location = await Location.getCurrentPositionAsync({enableHighAccuracy: true})
   let region = {
     latitude: location.coords.latitude,
     longitude: location.coords.longitude,
     latitudeDelta: 0.045,
     longitudeDelta: 0.045,
   }

   this.setState({region: region})
   }

 centerMap() {
   const { latitude, 
     longitude, 
     latitudeDelta, 
     longitudeDelta } = this.state.region;

this.map.animateToRegion({
  latitude,
  longitude,
  latitudeDelta,
  longitudeDelta,
})
}

render() {  
return (
  <View style={styles.container}>
    <CurrentLocationButton cb={() => {this.centerMap() }}/>
    <MapView
      initialRegion={this.state.region}
      showsUserLocation={true}
      showsCompass={true}
      rotateEnabled= {false}
      ref={(map) => {this.map = map}}
      style={{flex: 1, zIndex: 0}}>
      <CustomIcon driver={{uid: 'null', location: {
        latitude: 42.187527,
        longitude: -121.709072,
      }}} />
    </MapView>
  </View>
);
}
}

 export default class MapNavigator extends React.Component {
 state = {}

 render() {
     return(
     <RootStackNavigator.Navigator>
         <RootStackNavigator.Screen 
             name="Jobs Near Me"
             component={App}
         />
     </RootStackNavigator.Navigator>)
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
 },
}); 

Наконец, изображение Я использую это:

Я хочу, чтобы изображение отображалось в обзоре карты и было привязано к нижней точке изображения и оставалось там при увеличении карты и вне. Вместо этого изображение закрепляется в верхнем левом углу, поэтому точка будет начинаться в Юте и заканчиваться в Мексике при уменьшении масштаба экрана. Я попытался изменить аргументы x и y для опоры привязки и использовать в качестве аргументов фактический размер изображения (вместо привязки = {{x: 1, y: .5}}, anchor = {{x: 70, y: 37) }}, и я попытался настроить значения привязки x и y многими другими способами, но не могу изменить точку привязки. Сообщения об ошибках отсутствуют.

Любая помощь будет принята с благодарностью! Спасибо!

Answer 1

Я понял, как исправить эту проблему. Я использовал MapKit на IOS, поэтому опора была centerOffset, а не привязкой. Когда я внес изменения, он закрепил изображение в нижней середине изображения, как и предполагалось.