获取 Mapbox-GL 中 "map" 对象 反应原生

Question

我有一个这样的代码：

import React, { Component } from 'react'
import MapboxGL from '@react-native-mapbox-gl/maps'
MapboxGL.setAccessToken( 'xxxx' )
export default class DebugMap extends Component {
render() {
return <View style={{ flex: 1}}>

<MapboxGL.MapView
ref={(c) => (this.map = c)}
onPress={v => this.map.moveTo( 40, 10 )}
style={{flex: 1}}>
<MapboxGL.Camera
zoomLevel={10}
centerCoordinate={[50, 20]}
/>
</MapboxGL.MapView>
</View>
}
}

地图通常以50, 20为中心显示，但如果我按下它，就会抛出一个错误：

TypeError: _this3.map.moveTo is not a function. (In '_this3.map.moveTo(48, 11)', '_this3.map.moveTo' is undefined)

我错过了什么？

更新：

如果我做console.info( 'load map', this.map )，我会在控制台中看到：

{"_callbackMap": Map {"setHandledMapChangedEvents_347" => {"reject": [Function anonymous], "resolve": [Function anonymous]}}, "_nativeModuleName": "RCTMGLMapView", "_nativeRef": {"_children": [[ReactNativeFiberHostComponent]], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 157560, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 0.308383971452713, "actualStartTime": 174949282.375041, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": "RCTMGLAndroidTextureMapView", "firstEffect": null, "flags": 132, "index": 0, "key": null, "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function ref], "return": [FiberNode], "selfBaseDuration": 0.2550770044326782, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 1.2080000042915344, "type": "RCTMGLAndroidTextureMapView", "updateQueue": null}, "_nativeTag": 12959, "viewConfig": {"Commands": [Object], "NativeProps": [Object], "bubblingEventTypes": undefined, "directEventTypes": [Object], "uiViewClassName": "RCTMGLAndroidTextureMapView", "validAttributes": [Object]}}, "_onAndroidCallback": [Function bound _onAndroidCallback], "_onChange": [Function bound _onChange], "_onDebouncedRegionDidChange": [Function debounced], "_onDebouncedRegionWillChange": [Function debounced], "_onLayout": [Function bound _onLayout], "_onLongPress": [Function bound _onLongPress], "_onPress": [Function bound _onPress], "_preRefMapMethodQueue": [], "_reactInternalInstance": {}, "_reactInternals": {"_debugHookTypes": null, "_debugID": 157251, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 157243, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": null, "actualDuration": 1.7872289419174194, "actualStartTime": 174946767.76704, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 1, "dependencies": null, "elementType": [Function DebugMap], "firstEffect": [FiberNode], "flags": 0, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 9.36361500620842, "sibling": null, "stateNode": [DebugMap], "tag": 1, "treeBaseDuration": 134.84192779660225, "type": [Function DebugMap], "updateQueue": [Object]}, "_debugSource": undefined, "actualDuration": 1.6326139569282532, "actualStartTime": 174946767.862117, "alternate": {"_debugHookTypes": null, "_debugID": 157251, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 2.172077000141144, "actualStartTime": 174949280.499117, "alternate": [Circular], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": [Function MapView], "firstEffect": [FiberNode], "flags": 1, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function ref], "return": [FiberNode], "selfBaseDuration": 1.1991539895534515, "sibling": [FiberNode], "stateNode": [Circular], "tag": 1, "treeBaseDuration": 3.0254620015621185, "type": [Function MapView], "updateQueue": [Object]}, "child": {"_debugHookTypes": null, "_debugID": 157255, "_debugNeedsRemount": false, "_debugOwner": [Circular], "_debugSource": undefined, "actualDuration": 0.7919219732284546, "actualStartTime": 174946768.707117, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": [Object], "firstEffect": [FiberNode], "flags": 1, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [Circular], "selfBaseDuration": 0.26892298460006714, "sibling": null, "stateNode": null, "tag": 11, "treeBaseDuration": 1.6707689762115479, "type": [Object], "updateQueue": null}, "childLanes": 0, "dependencies": null, "elementType": [Function MapView], "firstEffect": {"_debugHookTypes": null, "_debugID": 157560, "_debugNeedsRemount": false, "_debugOwner": [Circular], "_debugSource": undefined, "actualDuration": 0.21738401055335999, "actualStartTime": 174946769.273887, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": "RCTMGLAndroidTextureMapView", "firstEffect": null, "flags": 132, "index": 0, "key": null, "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function ref], "return": [FiberNode], "selfBaseDuration": 0.17261499166488647, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 1.1255379915237427, "type": "RCTMGLAndroidTextureMapView", "updateQueue": null}, "flags": 1, "index": 0, "key": null, "lanes": 1, "lastEffect": {"_debugHookTypes": null, "_debugID": 157259, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 0.4420759975910187, "actualStartTime": 174946769.150502, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": "RCTView", "firstEffect": [FiberNode], "flags": 4, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.21599999070167542, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 1.341537982225418, "type": "RCTView", "updateQueue": null}, "memoizedProps": {"attributionEnabled": true, "children": [Array], "localizeLabels": false, "logoEnabled": true, "onPress": [Function onPress], "pitchEnabled": true, "regionDidChangeDebounceTime": 500, "regionWillChangeDebounceTime": 10, "rotateEnabled": true, "scrollEnabled": true, "style": [Object], "surfaceView": false}, "memoizedState": {"height": 664, "isReady": true, "isUserInteraction": false, "region": null, "width": 360}, "mode": 8, "nextEffect": null, "pendingProps": {"attributionEnabled": true, "children": [Array], "localizeLabels": false, "logoEnabled": true, "onPress": [Function onPress], "pitchEnabled": true, "regionDidChangeDebounceTime": 500, "regionWillChangeDebounceTime": 10, "rotateEnabled": true, "scrollEnabled": true, "style": [Object], "surfaceView": false}, "ref": [Function ref], "return": {"_debugHookTypes": null, "_debugID": 157249, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 1.6546899378299713, "actualStartTime": 174946767.835963, "alternate": [FiberNode], "child": [Circular], "childLanes": 1, "dependencies": null, "elementType": "RCTView", "firstEffect": [FiberNode], "flags": 0, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.43476900458335876, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 124.73000481724739, "type": "RCTView", "updateQueue": null}, "selfBaseDuration": 0.8298459947109222, "sibling": {"_debugHookTypes": null, "_debugID": 157252, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 0.006691992282867432, "actualStartTime": 174946769.690194, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": [Object], "firstEffect": null, "flags": 0, "index": 1, "key": null, "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.5985389947891235, "sibling": [FiberNode], "stateNode": null, "tag": 11, "treeBaseDuration": 120.09238883852959, "type": [Object], "updateQueue": null}, "stateNode": [Circular], "tag": 1, "treeBaseDuration": 2.50061497092247, "type": [Function MapView], "updateQueue": {"baseState": [Object], "effects": null, "firstBaseUpdate": [Object], "lastBaseUpdate": [Object], "shared": [Object]}}, "context": {}, "logger": {"logCallback": null, "loggerEmitter": {"_disableCallsIntoModule": false, "_subscriber": [EventSubscriptionVendor]}, "startedCount": 1, "subscription": {"context": undefined, "emitter": [NativeEventEmitter], "eventType": "LogEvent", "key": 1, "listener": [Function anonymous], "subscriber": [EventSubscriptionVendor]}}, "props": {"attributionEnabled": true, "children": [<Camera … />, null, undefined, null, [Array]], "localizeLabels": false, "logoEnabled": true, "onPress": [Function onPress], "pitchEnabled": true, "regionDidChangeDebounceTime": 500, "regionWillChangeDebounceTime": 10, "rotateEnabled": true, "scrollEnabled": true, "style": {"flex": 1}, "surfaceView": false}, "refs": {}, "state": {"height": 664, "isReady": true, "isUserInteraction": false, "region": {"geometry": [Object], "properties": [Object], "type": "Feature"}, "width": 360}, "updater": {"enqueueForceUpdate": [Function enqueueForceUpdate], "enqueueReplaceState": [Function enqueueReplaceState], "enqueueSetState": [Function enqueueSetState], "isMounted": [Function isMounted]}}

Answer 1

moveTo方法属于Camera对象。参考。

我没有设置要测试的环境。代码看起来像这样：

import React, { Component } from 'react';
import {StyleSheet, View} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
MapboxGL.setAccessToken('xxxx');
export default class DebugMap extends Component {
constructor(props) {
super(props);
this.camera = React.createRef();
this.map = React.createRef();
this.handleOnpress = this.handleOnpress.bind(this);
}
handleOnpress(event) {
const loc = event.geometry.coordinates;
this.camera.current.moveTo(loc, 200);
}
render() {
return (
<View style={{ flex: 1 }}>
<MapboxGL.MapView ref={this.map} 
onPress={this.handleOnpress} 
style={{ flex: 1 }}>

<MapboxGL.Camera ref={this.camera} 
zoomLevel={10} 
centerCoordinate={[50, 20]} />
</MapboxGL.MapView>
</View>
);
}
}