难以在 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',
 },
});

最后，我使用的图像是这样的：

我希望图像在地图视图上呈现并锚定在图像的底部，并在地图放大和缩小时停留在那里。相反，图像锚定在左上角，因此随着屏幕缩小，该点将从犹他州开始并在墨西哥结束。我尝试更改 anchor 道具的 x 和 y 参数并使用实际图像大小作为参数（而不是 anchor={{x: 1, y: .5}}, anchor={{x: 70, y: 37 }} 并且我已经尝试通过许多其他方式调整 x 和 y 锚点值，但无法更改锚点。没有错误消息。

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

我想出了解决这个问题的方法。我在 IOS 上使用 MapKit，因此道具是 centerOffset 而不是锚点。当我进行更改时，它按预期将图像锚定在图像的底部中间。

难以在 React Native Maps 中的自定义图标上实现锚点道具

Difficulty implementing the anchor prop on a custom Icon in React Native Maps

reactjs

react-native

react-native-maps

expo