因此,我想制作一个RectButton,当按下它时,它将执行将相机发送到特定坐标的函数(onFlyToPress())。但是每次我使用flyTo函数时,都会向我返回一个异常,指出该函数无法识别/相机不是对象。
import React, { Component } from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import { PermissionsAndroid } from 'react-native';
import tabbarConfigs from '../appColorElements.json'; // arquivo que controla toda a estrutura da tabbar
import { RectButton } from 'react-native-gesture-handler';
export default class Principal extends Component {
state = {
position: [50, 50],
styleURL: 'mapbox://styles/qun4ntumt/ck390137d3lta1dnvs5u9428r',
};
onFlyToPress() {
this.map.flyTo([-122.400021, 37.789085], 6000);
}
render() {
return (
<View style={styles.container}>
<MapboxGL.MapView
style={styles.map}
styleURL={tabbarConfigs.colorElements.mapa.cor}
rotateEnabled={false}
animated={true}
logoEnabled={false}
compassEnabled={false}
attributionEnabled={false}
debugActivex>
<MapboxGL.Camera
zoomLevel={16}
centerCoordinate={this.state.position}
maxZoomLevel={16}
/>
<MapboxGL.UserLocation />
</MapboxGL.MapView>
<RectButton
style={styles.btnCentralizer}
onPress={() => {
this.onFlyToPress();
}}>
<Localicon
height={20}
width={20}
fill={tabbarConfigs.colorElements.paletaApp.cinza}
style={{ alignSelf: 'center' }}
/>
</RectButton>
</View>
);
}
}
我有同样的问题。代替flyTo(),我通过使用setState({centerCoordinates})代替flyTo()直接更新了Camera的中心坐标。
<MapboxGL.Camera
zoomLevel={15}
animationMode={'flyTo'}
animationDuration={3000}
centerCoordinate={this.state.centerCoordinate}
/>
希望这会有所帮助。