react-native-mapを使ってみる


普段はPHP書いているおじさんなんですが、若さがほしいのでReactNative触ってみました。

最近ちょっとReactNativeに興味があったのでとりあえずMAP系の何かを作りたいと思い[react-native-map](https://github.com/airbnb/react-native-maps)を使ってみました。

今回はReactNativeでiOSアプリを作ることを想定しています。

## バージョン

今夏使用したReactNativeとReactNativeMapsのバージョンは以下の通り

- react-native-maps@^0.14.0
- react-native@0.43.3


## Installationのドキュメント通りにやっても動かない
[Installation](https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md)の通りにやったらエラーになりました。。。

```
$ yarn add react-native-maps
$ react-native link react-native-maps
$ react-native run-ios
```

これだとBuildエラーになってしまう・・・。


これは問題は「RCTConvert+MapKit」が「RCTConvert+AirMap」に変わったけど、うまく対応出来てないことみたいです。(おそらく）
[#1214](https://github.com/airbnb/react-native-maps/pull/1214)のPRがマージされればいいのですが、今は手動で直すしかないようです。


### `AirMaps.xcodeproj`を修正する


```
$ open ./node_modules/react-native-maps/lib/ios/AirMaps.xcodeproj
```

`AirMaps`の中の`RCTConvert+MapKit.h`と`RCTConvert+MapKit.m`を削除します。
![スクリーンショット 2017-04-16 17.24.25.png](https://qiita-image-store.s3.amazonaws.com/0/2095/9060894b-9a4b-eaca-4977-52cb23e2bf55.png "スクリーンショット 2017-04-16 17.24.25.png")

次に`RCTConvert+ AirMap.h`と`RCTConvert+ AirMap.m`を追加します。
右クリックして`Add Files to "AireMaps"..`で追加していきます。


![スクリーンショット 2017-04-16 17.25.55.png](https://qiita-image-store.s3.amazonaws.com/0/2095/76f43444-da9b-c241-7c2f-8392ebf59252.png "スクリーンショット 2017-04-16 17.25.55.png")


![スクリーンショット 2017-04-16 17.26.06.png](https://qiita-image-store.s3.amazonaws.com/0/2095/94db1847-7a8b-7c7a-84a8-c0b525d2cbfc.png "スクリーンショット 2017-04-16 17.26.06.png")
 

### ビルドしてみる

```
$ react-native run-ios
```

これでビルドできるはず。
あとは適当にMapViewを表示させてみます。

```index.ios.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import MapView from 'react-native-maps';

export default class ReactNativeMapsExample6 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
        ></MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

AppRegistry.registerComponent('ReactNativeMapsExample6', () => ReactNativeMapsExample6);

```

これでおそらく動くはず？

## module-resolverがないって怒られる

この状態でうごくかなぁーと思ったらmodule-resolverないって言われてエラーになります。
これは`module-resolver`と`babel-plugin-module-resolver`を入れれば解決するようです。

```
$ yarn add --dev babel-plugin-module-resolver
$ yarn add --dev module-resolver
```


これで無事AppleMapが表示されます。

![スクリーンショット 2017-04-16 17.37.27.png](https://qiita-image-store.s3.amazonaws.com/0/2095/258cf1cd-1dc6-8049-dab6-fd7bb0f6b64a.png "スクリーンショット 2017-04-16 17.37.27.png")




## GoogleMapを表示させたい

うまくいかないんですよね。。。
[#990](https://github.com/airbnb/react-native-maps/issues/990)このあたりの問題だと思いますが、、、だれか解決策知っている方教えてください。