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

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

最后，我使用的图片是这样的。

我想让图片呈现在mapview上 并固定在图片的底部并在地图放大和缩小时停留在那里。相反，图像被锚定在左上角，所以当屏幕放大时，该点将从犹他州开始，在墨西哥结束。我试过更改锚点道具的x和y参数，并使用实际图像大小作为参数（而不是anchor={{x: 1, y: .5}}, anchor={{x: 70, y: 37}}，我还尝试过用许多其他方式调整x和y锚点的值，但无法让锚点发生变化。没有错误信息。

任何帮助都将是非常感激的! 谢谢！我正在尝试显示一个自定义的页面。

Answer 1

我想出了如何解决这个问题。我在IOS上使用MapKit，因此道具是centerOffset而不是锚。当我做出改变时，它按照预期将图像锚定在图像的底部中间。