react-native-mapsを使う（2018/4/12 時点） #react-native-maps

2018/4/12 時点での話

react-native-mapsを使う方法はどうやら刻々と変わるようです。
公式ページを見た方がよさそうです。

react-native-maps/installation.md at master · react-community/react-native-maps

install

ターミナルを開いてプロジェクトを作成したいフォルダに移動します。
その後、以下コマンドを打つ

react-nativeプロジェクトを作成

react-native init reactNativeMap

react-native-mapsをインストール

npm install -g react-native-maps

or 

npm update -g react-native-maps

cd reactNativeMap
npm install react-native-maps --save

npm

以下のようなメッセージが表示されていれば、react-nativeのバージョンを合わせる

react-native-maps@0.21.0 requires a peer of react-native@^0.51 || ^0.52 || ^0.53 || ^0.54 but none is installed. You must install peer dependencies yourself.

package.jsonを修正

2018/4/12現在

react:16
react-native:0.54

package.json

  "dependencies": {
    "react": "^16",
    "react-native": "^0.54",
    "react-native-maps": "^0.21.0"
  },

モジュールを再インストール

npm install

cocoapods

開発環境にcocoapodsが入っていない場合には入れる

sudo gem install cocoapods

iOS - CocoaPods

iosフォルダの下にPodfileという名の空ファイルを作成し以下の内容をコピーする。
※ YOUR_PROJECT_TARGETはプロジェクト名に変更する。

# 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

今回は、
YOUR_PROJECT_TARGETを、reactNativeMap に変更しました。

target '_YOUR_PROJECT_TARGET_' do
　↓
target 'reactNativeMap' do

pod install

cd ios
pod repo update
pod install

Google Maps　を使うなら、実行するな！

Using React Native Link
Run react-native link react-native-maps after which you should be able to use this library on iOS. Note that by default this will use Apple Maps and you will miss some of the features provided by Google (see the instruction on manually enabling Google Maps below).

と書いてあります。

If you want to use Google maps

Add to ios/reactMap/AppDelegate.m:

app.js

app.jsに地図を表示できるようにします。



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


export default class MyApp extends React.Component {
  render() {
    const { region } = this.props;
    console.log(region);

    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: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

build(実行)

実行

カレントフォルダをプロジェクトフォルダ（app.jsが存在するフォルダ）に戻して以下コマンド

react-native run-ios

airmap dows not exist
と表示されるときは、YOUR_PROJECT_TARGETの変更忘れなど

react-native-mapsを使う（2018/4/12 時点）