反応しないネイティブマップの領域更新しない - 1つの領域にスタックしたマップ

Question

<MapView>があり、マップをスクロールすると領域が更新されません。基本的に地図は1つの地域に限定されています。スクロールすると正確に同じ地域が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 
    } 
}) 

map.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です。