cocoapods使わないでreact nativeでgoogle mapsを表示する
目的
cocoapodsを使わずにgoogle mapsをreact nativeのプロジェクトで表示させる。
cocoapodsを入れて余計な依存関係を増やしてエラーと戦いたくないのでgoogle maps SDKとの連携は手動で行う。
環境
Mac
Xcode10
react native 0.57
手順
1.
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
を見ればオッケー。
簡単に、下のようにかける。
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を指定するなどしないと地図が表示されずにあれーー???ってなる。(なった。)
Author And Source
この問題について(cocoapods使わないでreact nativeでgoogle mapsを表示する), 我々は、より多くの情報をここで見つけました https://qiita.com/Umibows/items/f4e6450208da798d19b7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .