Question

我正在使用Expo中的MapView模块，我认为它与react-native-maps的工作方式相同。目前，我尝试使用我的MapView的 ref 道具来获取地图对象。我不确定为什么地图对象未定义。我是否正确使用fitToSuppliedMarkers方法？为什么地图对象未定义？这是一个错误的屏幕：

以下是Map的代码：

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))

从Expo.MapView React-native将fitToSuppliedMarkers应用到我的地图的正确方法是什么？

1 个答案: