Mapbox React Native 无法访问地图的方法答案

【问题标题】：Mapbox React Native can't access the map's methodsMapbox React Native 无法访问地图的方法
【发布时间】：2018-05-31 18:30:09
【问题描述】：

这可能是基本的，但我对 JS Mapbox 和 React Native Mapbox 之间的文档感到困惑。我通过import Mapbox from '@mapbox/react-native-mapbox-gl'; 将mapbox 导入我的项目来创建一个新的地图实例，然后在render() 函数中我通过以下方式加载地图：

<View style={container}>
    <Mapbox.MapView
        styleURL={Mapbox.StyleURL.Light}
        zoomLevel={12}
        centerCoordinate={[lat, lng]}
        style={styles.container}
        showUserLocation
    >
    {this.renderAnnotations()}
    </Mapbox.MapView>
</View>

renderAnnotations() 函数我定义如下：

renderAnnotations() {
        return this.state.stations.map((station, index) =>
          <TouchableHighlight onPress={this._map.flyTo.bind(this, station)} key={index}>
            <View ref={component => this._root = component}>
              <StationPoint key={station.id} station={station} />
            </View>
          </TouchableHighlight>
        );
      }

目标是通过相应的 flyTo onPress 事件在地图上渲染点。地图和这些点渲染得非常好，但 onpress 事件返回：

错误“无法读取未定义的属性‘flyTo’”

在this 教程中，它建议您可以使用this._map 访问地图。这是正确的，我犯了一个不同的错误吗？还是有另一种访问地图方法的方法？非常感谢任何帮助！

【问题讨论】：

标签： react-native mapbox mapbox-gl-js

【解决方案1】：

想出答案，以防它帮助别人。我没有在 MapView 上定义 ref 属性。它应该有一个定义为this._map 的引用，如下所示：

<View style={container}>
    <Mapbox.MapView
        ref={(c) => this._map = c}
        styleURL={Mapbox.StyleURL.Light}
        zoomLevel={12}
        centerCoordinate={[lat, lng]}
        style={styles.container}
        showUserLocation
    >
    {this.renderAnnotations()}
    </Mapbox.MapView>
</View>

【讨论】：