diff --git a/docs/mapview.html b/docs/mapview.html index d73792890e4..ca74eeca955 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Edit on GitHubProps #

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. +React Native | A framework for building native apps using React

React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Edit on GitHubProps #

annotations [{latitude: number, longitude: number, title: string, subtitle: string}] #

Map annotations with title/subtitle.

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. See EdgeInsetsPropType.js for more information.

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

onRegionChange function #

Callback that is called continuously when the user is dragging the map.

onRegionChangeComplete function #

Callback that is called once, when the user is done moving the map.

pitchEnabled bool #

When this property is set to true and a valid camera is associated with the map, the camera’s pitch angle is used to tilt the plane of the map. When this property is set to false, the camera’s pitch @@ -25,33 +25,44 @@ Default value is true.

, } = React; +var regionText = { + latitude: '0', + longitude: '0', + latitudeDelta: '0', + longitudeDelta: '0', +} + var MapRegionInput = React.createClass({ propTypes: { region: React.PropTypes.shape({ - latitude: React.PropTypes.number, - longitude: React.PropTypes.number, - latitudeDelta: React.PropTypes.number, - longitudeDelta: React.PropTypes.number, + latitude: React.PropTypes.number.isRequired, + longitude: React.PropTypes.number.isRequired, + latitudeDelta: React.PropTypes.number.isRequired, + longitudeDelta: React.PropTypes.number.isRequired, }), onChange: React.PropTypes.func.isRequired, }, getInitialState: function() { return { - latitude: 0, - longitude: 0, - latitudeDelta: 0, - longitudeDelta: 0, + region: { + latitude: 0, + longitude: 0, + latitudeDelta: 0, + longitudeDelta: 0, + } }; }, componentWillReceiveProps: function(nextProps) { - this.setState(nextProps.region); + this.setState({ + region: nextProps.region || this.getInitialState().region + }); }, render: function() { - var region = this.state; + var region = this.state.region || this.getInitialState().region; return ( <View> <View style={styles.row}> @@ -62,6 +73,7 @@ Default value is true.

={'' + region.longitude} style={styles.textInput} onChange={this._onChangeLongitude} + selectTextOnFocus={true} /> </View> <View style={styles.row}> @@ -82,6 +95,7 @@ Default value is true.

={'' + region.latitudeDelta} style={styles.textInput} onChange={this._onChangeLatitudeDelta} + selectTextOnFocus={true} /> </View> <View style={styles.row}> @@ -92,6 +106,7 @@ Default value is true.

={'' + region.longitudeDelta} style={styles.textInput} onChange={this._onChangeLongitudeDelta} + selectTextOnFocus={true} /> </View> <View style={styles.changeButton}> @@ -104,23 +119,29 @@ Default value is true.

}, _onChangeLatitude: function(e) { - this.setState({latitude: parseFloat(e.nativeEvent.text)}); + regionText.latitude = e.nativeEvent.text; }, _onChangeLongitude: function(e) { - this.setState({longitude: parseFloat(e.nativeEvent.text)}); + regionText.longitude = e.nativeEvent.text; }, _onChangeLatitudeDelta: function(e) { - this.setState({latitudeDelta: parseFloat(e.nativeEvent.text)}); + regionText.latitudeDelta = e.nativeEvent.text; }, _onChangeLongitudeDelta: function(e) { - this.setState({longitudeDelta: parseFloat(e.nativeEvent.text)}); + regionText.longitudeDelta = e.nativeEvent.text; }, _change: function() { - this.props.onChange(this.state); + this.setState({ + latitude: parseFloat(regionText.latitude), + longitude: parseFloat(regionText.longitude), + latitudeDelta: parseFloat(regionText.latitudeDelta), + longitudeDelta: parseFloat(regionText.longitudeDelta), + }); + this.props.onChange(this.state.region); }, }); @@ -131,6 +152,8 @@ Default value is true.

return { mapRegion: null, mapRegionInput: null, + annotations: null, + isFirstLoad: true, }; }, @@ -139,8 +162,10 @@ Default value is true.

> <MapView style={styles.map} - onRegionChange={this._onRegionChanged} + onRegionChange={this._onRegionChange} + onRegionChangeComplete={this._onRegionChangeComplete} region={this.state.mapRegion} + annotations={this.state.annotations} /> <MapRegionInput onChange={this._onRegionInputChanged} @@ -150,14 +175,35 @@ Default value is true.

); }, - _onRegionChanged(region) { - this.setState({mapRegionInput: region}); + _getAnnotations(region) { + return [{ + longitude: region.longitude, + latitude: region.latitude, + title: 'You Are Here', + }]; + }, + + _onRegionChange(region) { + this.setState({ + mapRegionInput: region, + }); + }, + + _onRegionChangeComplete(region) { + if (this.state.isFirstLoad) { + this.setState({ + mapRegionInput: region, + annotations: this._getAnnotations(region), + isFirstLoad: false, + }); + } }, _onRegionInputChanged(region) { this.setState({ mapRegion: region, mapRegionInput: region, + annotations: this._getAnnotations(region), }); }, diff --git a/docs/panresponder.html b/docs/panresponder.html index b88ce3a1831..9ea9467dca4 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -24,7 +24,7 @@ normal event.

A gestureState object has the following:

    // The accumulated gesture distance since becoming responder is // gestureState.d{x,y} }, - onResponderTerminationRequest: (evt, gestureState) => true, + onPanResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (evt, gestureState) => { // The user has released all touches while this view is the // responder. This typically means a gesture has succeeded @@ -52,7 +52,127 @@ as well.

    Be careful with onStartShould* callbacks. They only reflect updat Once the node is the responder, you can rely on every start/end event being processed by the gesture and gestureState being updated accordingly. (numberActiveTouches) may not be totally accurate unless you -are the responder.

Next →