Update NativeComponentsIOS.md

Summary:
Updated map view example to correct and extend on change event management

Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**

Explain the **motivation** for making this change. What existing problem does the pull request solve?

Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Make sure tests pass on both Travis and Circle CI.

**Code formatting**

Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).

For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/12759

Differential Revision: D4962286

Pulled By: hramos

fbshipit-source-id: 92cc41f100616d3b5633603cf69850ebc9fc33b2
This commit is contained in:
sebasbad 2017-04-28 05:52:03 -07:00 committed by Facebook Github Bot
parent 0ff16f63dd
commit 0f025df582
1 changed files with 25 additions and 2 deletions

View File

@ -306,13 +306,14 @@ You can see we're adding an event handler property to the view by subclassing `M
class MapView extends React.Component { class MapView extends React.Component {
constructor() { constructor() {
super(props)
this._onChange = this._onChange.bind(this); this._onChange = this._onChange.bind(this);
} }
_onChange(event: Event) { _onChange(event: Event) {
if (!this.props.onRegionChange) { if (!this.props.onRegionChange) {
return; return;
} }
this.props.onRegionChange(event.nativeEvent.region); this.props.onRegionChange(event.nativeEvent);
} }
render() { render() {
return <RNTMap {...this.props} onChange={this._onChange} />; return <RNTMap {...this.props} onChange={this._onChange} />;
@ -322,9 +323,31 @@ MapView.propTypes = {
/** /**
* Callback that is called continuously when the user is dragging the map. * Callback that is called continuously when the user is dragging the map.
*/ */
onRegionChange: React.PropTypes.func, onChange: React.PropTypes.func,
... ...
}; };
class MapViewExample extends React.Component {
onRegionChange(event: Event) {
// Do stuff with event.region.latitude, etc.
}
render() {
var region = {
latitude: 37.48,
longitude: -122.16,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
};
return (
<MapView region={region} pitchEnabled={false} style={{flex: 1}} onChange={this.onRegionChange}/>
);
}
}
// Module name
AppRegistry.registerComponent('MapViewExample', () => MapViewExample);
``` ```
## Styles ## Styles