react-native-mapを使ってみる #iOS

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

最近ちょっとReactNativeに興味があったのでとりあえずMAP系の何かを作りたいと思いreact-native-mapを使ってみました。

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

バージョン

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

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

Installationのドキュメント通りにやっても動かない

Installationの通りにやったらエラーになりました。。。

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

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

これは問題は「RCTConvert+MapKit」が「RCTConvert+AirMap」に変わったけど、うまく対応出来てないことみたいです。(おそらく）
#1214のPRがマージされればいいのですが、今は手動で直すしかないようです。

`AirMaps.xcodeproj`を修正する

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

AirMapsの中のRCTConvert+MapKit.hとRCTConvert+MapKit.mを削除します。

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

ビルドしてみる

$ 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が表示されます。

GoogleMapを表示させたい

うまくいかないんですよね。。。
#990このあたりの問題だと思いますが、、、だれか解決策知っている方教えてください。

react-native-mapを使ってみる