reactjs - 无法获取对 MapView 的引用-react-native-maps

Question

我一直在尝试使用 MapView 上的方法对某个区域进行动画处理，为此我需要访问引用，但它是未定义的。其他一切都工作正常，我只是无法获取引用，并且每当我尝试调用方法时，例如 `

this.map.animateToRegion({
  latitude: 0,
  longitude: 0,
  latitudeDelta: 1,
  longitudeDelta: 1
});

我收到一条错误消息:

Cannot read property 'animateToRegion' of undefined

<MapView
  ref={r => this.map = r}
  mapPadding={{ top: 0, left: 0, right: 0, bottom: 400 }}
  provider='google'
  style={{ flex: 1 }}
  region={this.region}
>
  {this.renderBarberMarkers()}
</MapView>

Answer 1

如果您使用钩子(Hook)，这是您的方法:

在你的函数之上:

const mapView = React.createRef();
const animateMap = () => {
    mapView.current.animateToRegion({ // Takes a region object as parameter
        longitude: 28.97916756570339,
        latitude: 41,
        latitudeDelta: 0.4,
        longitudeDelta: 0.4,
    },1000);
}

给你的MapView一个像这样的引用:

<MapView provider={PROVIDER_GOOGLE} region={{
       latitude: 37.78825,
       longitude: -122.4324,
       latitudeDelta: 0.015,
       longitudeDelta: 0.0121,
   }}
   ref={mapView}
   style={{flex:1}}>
</MapView>

最后要做的是触发动画，你可以这样做:

<TouchableOpacity onPress={animateMap}><Text>Start</Text></TouchableOpacity>