react-native-maps 区域未更新 - 地图卡在一个区域

Question

我有一个<MapView>，当我滚动地图时，该区域永远不会更新。该地图基本上停留在一个区域上。当我滚动时，它似乎将完全相同的区域传递给this.props.onRegionChange，这会阻止地图滚动。如何让它在滚动到区域中传递？

<MapView
          style={styles.map}
          region={this.props.region}
          onRegionChange={this.props.onRegionChange}
        >
          {
            this.props.markers.map(marker => {
              return (
                <MapView.Marker
                  coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
                  title={marker.name}
                />
              )
            })}
        </MapView>

完整代码：

Map.js

import { StyleSheet } from 'react-native'
import React, { Component } from 'react'
import MapView from 'react-native-maps'
import { connect } from 'react-redux'
import {
  Button,
  Container
} from 'native-base'

import selectMarkers from './markers.selector'

import { updateRegion } from './map.action'
import Icon from 'react-native-vector-icons/FontAwesome'
import { toggleMenu } from '../search-page/searchPage.action'
import mapStyle from './style'

const mapStateToProps = (state) => ({
  region: state.get('map').get('region'),
  markers: selectMarkers(state)
})

const mapDispatchToProps = (dispatch) => ({
  onRegionChange: (region) => {
    dispatch(updateRegion(region))
  },
  onToggleMenuClick: () => {
    dispatch(toggleMenu())
  }
})

class Map extends Component {

  componentDidMount() {
    const { store } = this.context
    this.unsubscribe = store.subscribe(() => { })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  render() {
  console.log('map')
  console.log('markers', this.props.markers)
    return (
      <Container>
        <MapView
          style={styles.map}
          region={this.props.region}
          onRegionChange={this.props.onRegionChange}
        >
          {
            this.props.markers.map(marker => {
              return (
                <MapView.Marker
                  coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
                  title={marker.name}
                />
              )
            })}
        </MapView>
        <Button
          small
          icon
          style={mapStyle.toggleMenuButton}
          onPress={() => this.props.onToggleMenuClick()}>
          <Icon name="sliders" size={20} color="#FFFFFF" />
        </Button>
      </Container>
    )
  }
}

Map.contextTypes = {
  store: React.PropTypes.object
}

Map.propTypes = {
  region: React.PropTypes.shape({
    latitude: React.PropTypes.number,
    longitude: React.PropTypes.number,
    latitudeDelta: React.PropTypes.number,
    longitudeDelta: React.PropTypes.number
  }).isRequired,
  onRegionChange: React.PropTypes.func.isRequired,
  onToggleMenuClick: React.PropTypes.func.isRequired,
  markers: React.PropTypes.array
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Map)

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
    zIndex: -1
  }
})

ma​​p.reducer

// @flow
import initialState from '../../config/config'
import { UPDATE_REGION } from './map.action'

const map = (
  initialMapState: [] = initialState.get('map'),
  action: Object): string => {
  switch (action.type) {
    case UPDATE_REGION: {
      if (action.payload) {
        return initialMapState.set('region', {
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
          latitude: action.payload.region.latitude,
          longitude: action.payload.region.longitude
        })
      } else {
        return initialMapState
      }
    }
    default:
      return initialMapState
  }
}

export default map

Answer 1

使用onRegionChangeComplete

<MapView
  style={styles.map}
  region={this.props.region}
  onRegionChangeComplete={this.props.onRegionChange}>

文档中的示例使用onRegionChange。所以也许onRegionChange 适用于大多数人。也许没有redux 也可以。如果遇到同样的问题，无论如何简单的解决方法是onRegionChangeComplete。