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


2018/4/12 時点での話

react-native-mapsを使う方法はどうやら刻々と変わるようです。
[公式ページ](https://github.com/react-community/react-native-maps/blob/master/docs/installation.md)を見た方がよさそうです。

[react\-native\-maps/installation\.md at master · react\-community/react\-native\-maps](https://github.com/react-community/react-native-maps/blob/master/docs/installation.md)



## 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


```js: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に地図を表示できるようにします。

```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_の変更忘れなど