목적

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.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 마 ps / 도쿠 멘 타치 온 / 이오 sdk / s rt
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 아래에 추가합니다.
참고
htps : // 기주 b. 코 m / Rea ct-nachi ゔ ぇ こんに ty / Rea ct-nachi ゔ ぇ ps / 이스 s / 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추가합니다.
참고
htps : // 기주 b. 코 m / Rea ct-nachi ゔ ぇ こんに ty / Rea ct-na ゔ ぇ- ps / 이스에 s / 2573



이것을하지 않으면
Use of undeclared identifier 'overlay'오류가 발생함



여기까지 하면 빌드는 할 수 있다.

6.
실제로 컴포넌트를 사용해 본다.
사용법은 htps : // 기주 b. 코 m / Rea ct-nachi ゔ ぇ こむむ ty / Rea ct-nachi ゔ ぇ ps
보면 오케이.

간단하게, 아래와 같이 거는다.

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를 지정하는 등하지 않으면 지도가 표시되지 않고 그래—? ? ? 된다. (이었다.)