项目介绍：

react-native-maps

https://github.com/airbnb/react-native-maps

iOS 和 Android 都适用的 React Native 地图组件 airbnb 开源项目

安装文档

Installation Instructions.

Setup Instructions for the Included Example Project.

兼容性

由于 React Native 快速迭代，airbnb并不会和RN保持同步更新，
但是对老版本的RN会有很好的兼容性。

Note about React requires

Since react-native 0.25.0, React should be required from node_modules.
React Native versions from 0.18 should be working out of the box, for lower
versions you should add react as a dependency in your package.json.

Component API

<MapView /> Component API

<MapView.Marker /> Component API

<MapView.Callout /> Component API

<MapView.Polygon /> Component API

<MapView.Polyline /> Component API

<MapView.Circle /> Component API

General Usage

import MapView from 'react-native-maps';

or

var MapView = require('react-native-maps');

This MapView component is built so that features on the map (such as Markers, Polygons, etc.) are
specified as children of the MapView itself. This provides an intuitive and react-like API for
declaratively controlling features on the map.

Rendering a Map with an initial region

MapView

  <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />

Using a MapView while controlling the region as state

getInitialState() {
  return {
    region: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
  };
}

onRegionChange(region) {
  this.setState({ region });
}

render() {
  return (
    <MapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
    />
  );
}

Rendering a list of markers on a map

<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <MapView.Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

Rendering a Marker with a custom view

<MapView.Marker coordinate={marker.latlng}>
  <MyCustomMarkerView {...marker} />
</MapView.Marker>

Rendering a Marker with a custom image

<MapView.Marker
  coordinate={marker.latlng}
  image={require('../assets/pin.png')}
/>

Rendering a custom Marker with a custom Callout

<MapView.Marker coordinate={marker.latlng}>
  <MyCustomMarkerView {...marker} />
  <MapView.Callout>
    <MyCustomCalloutView {...marker} />
  </MapView.Callout>
</MapView.Marker>

Draggable Markers

<MapView initialRegion={...}>
  <MapView.Marker draggable
    coordinate={this.state.x}
    onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
  />
</MapView>

Using a custom Tile Overlay

<MapView 
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  <MapView.UrlTile
   /**
   * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
   * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
   */
    urlTemplate={this.state.urlTemplate}
  />
</MapView>

For Android: add the following line in your AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

For IOS: configure App Transport Security in your app

Examples

MapView Events

The <MapView /> component and its child components have several events that you can subscribe to.
This example displays some of them in a log as a demonstration.

Tracking Region / Location

Programmatically Changing Region

One can change the mapview’s position using refs and component methods, or by passing in an updated
region prop. The component methods will allow one to animate to a given position like the native
API could.

Arbitrary React Views as Markers

Using the MapView with the Animated API

The <MapView /> component can be made to work with the Animated API, having the entire region prop
be declared as an animated value. This allows one to animate the zoom and position of the MapView along
with other gestures, giving a nice feel.

Further, Marker views can use the animated API to enhance the effect.

Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be
compatible with the Marker views. Not sure if this can be worked around yet or not.

Markers’ coordinates can also be animated, as shown in this example:

Polygon Creator

Other Overlays

So far, <Circle />, <Polygon />, and <Polyline /> are available to pass in as children to the
<MapView /> component.

Default Markers

Default markers will be rendered unless a custom marker is specified. One can optionally adjust the
color of the default marker by using the pinColor prop.

Custom Callouts

Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they
can be interacted with like any other view.

Additionally, you can fall back to the standard behavior of just having a title/description through
the <Marker />‘s title and description props.

Custom callout views can be the entire tooltip bubble, or just the content inside of the system
default bubble.

Image-based Markers

Markers can be customized by just using images, and specified using the image prop.

Draggable Markers

Markers are draggable, and emit continuous drag events to update other UI during drags.

Lite Mode ( Android )

Enable lite mode on Android with liteMode prop. Ideal when having multiple maps in a View or ScrollView.

Animated Region

The MapView can accept an MapView.AnimatedRegion value as its region prop. This allows you to utilize the Animated API to control the map’s center and zoom.

import MapView from 'react-native-maps';

getInitialState() {
  return {
    region: new MapView.AnimatedRegion({
      latitude: LATITUDE,
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  };
}

onRegionChange(region) {
  this.state.region.setValue(region);
}

render() {
  return (
    <MapView.Animated
      region={this.state.region}
      onRegionChange={this.onRegionChange}
    />
  );
}

Animated Marker Position

Markers can also accept an AnimatedRegion value as a coordinate.

getInitialState() {
  return {
    coordinate: new MapView.AnimatedRegion({
      latitude: LATITUDE,
      longitude: LONGITUDE,
    }),
  };
}

componentWillReceiveProps(nextProps) {
  if (this.props.coordinate !== nextProps.coordinate) {
    this.state.coordinate.timing({
      ...nextProps.coordinate,
      duration: 500
    }).start();
  }
}

render() {
  return (
    <MapView initialRegion={...}>
      <MapView.Marker.Animated coordinate={this.state.coordinate} />
    </MapView>
  );
}

Take Snapshot of map

currently only for ios, android implementation WIP

getInitialState() {
  return {
    coordinate: {
      latitude: LATITUDE,
      longitude: LONGITUDE,
    },
  };
}

takeSnapshot () {
  // arguments to 'takeSnapshot' are width, height, coordinates and callback
  this.refs.map.takeSnapshot(300, 300, this.state.coordinate, (err, snapshot) => {
    // snapshot contains image 'uri' - full path to image and 'data' - base64 encoded image
    this.setState({ mapSnapshot: snapshot })
  })
}

render() {
  return (
    <View>
      <MapView initialRegion={...} ref="map">
        <MapView.Marker coordinate={this.state.coordinate} />
      </MapView>
      <Image source={{ uri: this.state.mapSnapshot.uri }} />
      <TouchableOpacity onPress={this.takeSnapshot}>
        Take Snapshot
      </TouchableOpacity>
    </View>
  );
}

Zoom to Specified Markers

Pass an array of marker identifiers to have the map re-focus.

Zoom to Specified Coordinates

Pass an array of coordinates to focus a map region on said coordinates.

Troubleshooting

My map is blank

• Make sure that you have properly installed react-native-maps.

• Check in the logs if there is more informations about the issue.

• Try setting the style of the MapView to an absolute position with top, left, right and bottom values set.

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

<MapView
  style={styles.map}
  // other props
/>

Inputs don’t focus

• When inputs don’t focus or elements don’t respond to tap, look at the order of the view hierarchy, sometimes the issue could be due to ordering of rendered components, prefer putting MapView as the first component.

Bad:

<View>
  <TextInput/>
  <MapView/>
</View>

Good:

<View>
  <MapView/>
  <TextInput/>
</View>