Как правильно применить fitToSuppliedMarkers к моей карте из Expo.MapView React-native?

Question

Я использую модуль MapView из Экспо, который, как мне кажется, работает так же, как реагирующие на карты.В настоящее время я пытался использовать опору ref для моего MapView, чтобы получить объект карты.Я не уверен, почему объект карты не определен.Правильно ли я использую метод fitToSuppliedMarkers?Почему объект карты не определен?Вот скриншот ошибки:

А вот код карты:

import React, { Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import R from 'ramda';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { MapView } from 'expo';
import MapMarkerInfoModal from './MapMarkerInfoModal';

const navigationOptions = {
  drawerLabel: 'Map',
  drawerIcon: ({ tintColor }) =>
    <Icon name="map" size={24} color={tintColor} />,
};

const propTypes = {
  university: PropTypes.shape({ lat: PropTypes.number, lng: 
PropTypes.number }),
  studentCourses: PropTypes.object,
};

const enhancer = connect(state => ({
  university: state.user.university,
  studentCourses: state.studentCourses.items,
}));

const markerImg = require('../images/library_marker.png');

class Map extends Component {
  constructor(props) {
    super(props);

    this.meetings = [];
    this.state = { showInfo: false, selectedLocation: null };
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.map);
    this.meetings = R.pipe(
      R.values,
      R.pluck('meetings'),
      R.flatten,
      R.groupBy(m => (m ? `${m.lat} ${m.lng}` : '')),
      R.toPairs
    )(nextProps.studentCourses);

    setTimeout(
      () => this.map.fitToSuppliedMarkers(R.map(R.nth(0), 
this.meetings), 
true),
      1000
    );
  }

  showInfoModal = event => {
    const id = event.nativeEvent.id;
    const meetings = R.filter(item => item[0] === id, this.meetings)[0] [1];
    this.setState({ showInfo: true, selectedLocation: meetings });
  };

  hideInfoModal = () => {
    this.setState({ showInfo: false });
  };

  render() {
    return (
      this.props.university.lat !== null && <View style={{ flex: 1 }}>
        <MapView
          ref={ref => {
            this.map = ref;
          }}
          initialRegion={{
            latitude: this.props.university.lat,
            longitude: this.props.university.lng,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          provider="google"
          showsMyLocationButton={true}
          showsCompass={true}
          zoomEnabled={true}
          loadingEnabled={true}
          style={{ flex: 1 }}
        >
          {this.meetings.map(([coord, mtg]) => {
            if (coord === '') return null;

            const [lat, lng] = coord.split(' ');
            return (
              <MapView.Marker
                key={coord}
            i    dentifier={coord}
                coordinate={{
                  latitude: Number(lat),
                  longitude: Number(lng),
                }}
                image={markerImg}
                onPress={this.showInfoModal}
              />
            );
          })}
        </MapView>
        <MapMarkerInfoModal
          visible={this.state.showInfo}
          location={this.state.selectedLocation}
          onClose={this.hideInfoModal}
        />
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('DrawerOpen')}
          style={{ position: 'absolute', top: 30, left: 20 }}
        >
          <Icon
            name="menu"
            size={25}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

Map.propTypes = propTypes;
Map.navigationOptions = navigationOptions;

export default enhancer(Map);

Answer 1

Просто добавьте root

() => this.map.root.fitToSuppliedMarkers(R.map(R.nth(0))