Map follow user location

Summary:
Fix #3105

It's the same PR as #3119 but as I force-pushed in my branch, I can't reopen the PR. I added an example.
![capture d ecran 2016-01-05 a 07 15 37](https://cloud.githubusercontent.com/assets/1107936/12108841/2727f504-b37c-11e5-8250-b53785930aba.png)
Closes https://github.com/facebook/react-native/pull/5126

Reviewed By: svcscm

Differential Revision: D2803052

Pulled By: nicklockwood

fb-gh-sync-id: 2e8978ff1b293d699462a8290b45fa74cc16b4dd
This commit is contained in:
Quentin Valmori 2016-01-06 11:00:15 -08:00 committed by facebook-github-bot-5
parent 61025a9b33
commit 3d0ff69e40
4 changed files with 28 additions and 17 deletions

View File

@ -290,9 +290,15 @@ exports.examples = [
}
},
{
title: 'Map shows user location',
title: 'showsUserLocation + followUserLocation',
render() {
return <MapView style={styles.map} showsUserLocation={true} />;
return (
<MapView
style={styles.map}
showsUserLocation={true}
followUserLocation={true}
/>
);
}
},
{

View File

@ -49,15 +49,22 @@ const MapView = React.createClass({
style: View.propTypes.style,
/**
* If `true` the app will ask for the user's location and focus on it.
* Default value is `false`.
* If `true` the app will ask for the user's location and display it on
* the map. Default value is `false`.
*
* **NOTE**: You need to add NSLocationWhenInUseUsageDescription key in
* Info.plist to enable geolocation, otherwise it is going
* to *fail silently*!
* **NOTE**: on iOS, you need to add the `NSLocationWhenInUseUsageDescription`
* key in Info.plist to enable geolocation, otherwise it will fail silently.
*/
showsUserLocation: React.PropTypes.bool,
/**
* If `true` the map will follow the user's location whenever it changes.
* Note that this has no effect unless `showsUserLocation` is enabled.
* Default value is `true`.
* @platform ios
*/
followUserLocation: React.PropTypes.bool,
/**
* If `false` points of interest won't be displayed on the map.
* Default value is `true`.
@ -156,13 +163,11 @@ const MapView = React.createClass({
/**
* Whether the pin should be draggable or not
* @platform ios
*/
draggable: React.PropTypes.bool,
/**
* Event that fires when the annotation drag state changes.
* @platform ios
*/
onDragStateChange: React.PropTypes.func,
@ -282,7 +287,7 @@ const MapView = React.createClass({
},
render: function() {
let children = [], {annotations, overlays} = this.props;
let children = [], {annotations, overlays, followUserLocation} = this.props;
annotations = annotations && annotations.map((annotation: Object) => {
let {
id,
@ -430,11 +435,17 @@ const MapView = React.createClass({
};
}
// followUserLocation defaults to true if showUserLocation is set
if (followUserLocation === undefined) {
followUserLocation = this.props.showUserLocation;
}
return (
<RCTMap
{...this.props}
annotations={annotations}
children={children}
followUserLocation={followUserLocation}
overlays={overlays}
onPress={onPress}
onChange={onChange}

View File

@ -100,10 +100,6 @@ const CGFloat RCTMapZoomBoundBuffer = 0.01;
}
}
super.showsUserLocation = showsUserLocation;
// If it needs to show user location, force map view centered
// on user's current location on user location updates
_followUserLocation = showsUserLocation;
}
}

View File

@ -85,6 +85,7 @@ RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showsPointsOfInterest, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)
RCT_EXPORT_VIEW_PROPERTY(followUserLocation, BOOL)
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(rotateEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)
@ -320,9 +321,6 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
region.span.longitudeDelta = RCTMapDefaultSpan;
region.center = location.coordinate;
[mapView setRegion:region animated:YES];
// Move to user location only for the first time it loads up.
mapView.followUserLocation = NO;
}
}