React NativeでUberみたいな位置情報を使ったアプリを作ります。
今回は、「React NativeでGoogle Mapを出現させる」ところまで進めていきたいと思います。
react-native link
をやってはいけない、やってOKなど情報が錯綜していますが、下記の開発環境ではドキュメント通りに進めていくことが正解でした。
開発環境
react-native: 0.55.3
react-native-maps: 0.21.0
Mapを表示する
- react-native-mapsをインストールする
npm install --save react-native-maps
- Google MapのAPIキーを取得する こちらのドキュメント通りに、Google Map APIキーを取得したあと、プロジェクトにAPIキーを追加していきます。
AppDelegate.m
以下のインポート文を追加します。
#import "AppDelegate.h"
@import GoogleMaps; // ここを追加
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
[GMSServices provideAPIKey:@"YOUR_API_KEY"]; // ここを追加
- Pod installする
ios階層で
pod init
して(Cocoa podをインストールしてることを想定)Podfileを出現させます。そこに、下記をコピペ。
Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target '_YOUR_PROJECT_TARGET_' do
rn_path = '../node_modules/react-native'
rn_maps_path = '../node_modules/react-native-maps'
# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
pod 'React', path: rn_path, subspecs: [
'Core',
'CxxBridge',
'DevSupport',
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
]
# React Native third party dependencies podspecs
pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
# If you are using React Native <0.54, you will get the following error:
# "The name of the given podspec `GLog` doesn't match the expected one `glog`"
# Use the following line instead:
#pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
# react-native-maps dependencies
pod 'react-native-maps', path: rn_maps_path
pod 'react-native-google-maps', path: rn_maps_path # Remove this line if you don't want to support GoogleMaps on iOS
pod 'GoogleMaps' # Remove this line if you don't want to support GoogleMaps on iOS
pod 'Google-Maps-iOS-Utils' # Remove this line if you don't want to support GoogleMaps on iOS
end
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == 'react-native-google-maps'
target.build_configurations.each do |config|
config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
end
end
if target.name == "React"
target.remove_from_project
end
end
end
書き込んだら、pod install
します。
ここまでできたら、App.js
にコードを書いていきます。
App.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps'
export default class Main extends Component {
render() {
return (
<MapView
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
}
const styles = StyleSheet.create({
map: { ...StyleSheet.absoluteFillObject, },
});
これで、通常のMapは出るはずです。
- Google Mapを表示する 上記の仕様は、Google Mapも出せるようにインストールしておいたので、下記のようにソースコードを変えてあげるだけで出るはずです。
App.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
export default class Main extends Component {
render() {
return (
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
}
const styles = StyleSheet.create({
map: { ...StyleSheet.absoluteFillObject, },
});