目的

cocoapodsを使わずにgoogle mapsをreact nativeのプロジェクトで表示させる。
cocoapodsを入れて余計な依存関係を増やしてエラーと戦いたくないのでgoogle maps SDKとの連携は手動で行う。

環境

Mac
Xcode10
react native 0.57

手順

yarn add react-native-maps

npmでももちろん良い

※※react-native linkはしてはいけない

2.
https://developers.google.com/maps/documentation/ios-sdk/start
のstep1, step2(install manually), step3, step4を行う。
view画面はreactで、pod installはしないのでstep5以降は飛ばす。

xcode projectにframework関連ファイルを追加する時、
GoogleMaps.bundle以外は↓画面のようにチェックをつける。
GoogleMaps.bundleの追加の時はcopy items if neededのチェックを外す

3.
手順2と同じようにnode_modules/react-native-maps/lib/ios/AirGoogleMapsとnode_modules/react-native-maps/lib/ios/AirMapsをxcodeプロジェクト/Frameworks下に追加する。
参考
https://github.com/react-native-community/react-native-maps/issues/693

この時上画面のようにチェックする。

ここまで終わると

こんな感じに追加されているはず。

4.
Build Settings →　Search Paths → Framework Search Pathsに
$(HOME)/Documents/GoogleMaps-2.7.0/Base/Frameworks
$(HOME)/Documents/GoogleMaps-2.7.0/Maps/Frameworks
を追加する。
DebugとRelease両方に追加する。
追加しないと、AppDelegate.mの @ import GoogleMaps;がnot foundエラー吐く。

5.
Build Settings →　Apple Clang - Preprocessing → Preprocessor Macrosに
HAVE_GOOGLE_MAPS=1
を追加する。
参考
https://github.com/react-native-community/react-native-maps/issues/2573

これをやらないと
Use of undeclared identifier 'overlay'エラーがでる

ここまでやればビルドはできる。

6.
実際にコンポーネントを使ってみる。
使い方はhttps://github.com/react-native-community/react-native-maps
を見ればオッケー。

簡単に、下のようにかける。

index.js

import React, { Component } from 'react';
import {
  View,
} from 'react-native';
import MapView, {
  PROVIDER_GOOGLE,
  Marker,
} from 'react-native-maps';

type Props = {
  // 省略
};

class Map extends Component<Props> {
  // 省略
  render() {
    const marker = {
      latitude: 35,
      longitude: 135,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    };

    return (
      <View
        style={styles.viewContainer}
      >
      　　<MapView
       　　　provider={PROVIDER_GOOGLE}
        　style={styles.map}
        　initialRegion={marker}
       　>
        　　<Marker
         　　　coordinate={marker}
          　title="title"
          　description="description"
         />
       　</MapView>
      </View>
    );
  }
}

export default Map;

ちなみにStyleSheet.createでwidthを指定するなどしないと地図が表示されずにあれーー？？？ってなる。(なった。)

cocoapods使わないでreact nativeでgoogle mapsを表示する

目的

環境

手順