리액트 네이티브에서 티맵 사용하는 방법

리액트 네이티브에서 티맵을 사용하는 방법

기본적으로는 공식문서 를 보고 따라하면 된다.

티맵을 이용하기 위해서는 API 키가 필요한데, 이는 이 웹사이트 에서 발급받을 수 있다.

안드로이드

gradle.build 에 의존성 추가하기

• implementation files('libs/com.skt.Tmap_1.67.jar')
  • .jar 파일에서 의존성을 가져오도록 설정하면 된다.

AndoridManifest.xml 파일에 내용 추가하기

<manifest>
    <!-- ... 기타 내용 -->
    <queries>
      <package android:name="com.skt.tmap.ku" />
    </queries>
</manifest>

이 부분은 공식문서에 없는데, 작성하지 않으면 에러가 날 수 있다. 위 소스코드는 안드로이드에 TMap 앱이 설치되어 있는지 알아보기 위해 필요하다. 위의 내용이 필요한 이유는 안드로이드 11 이상부터 모든 패키지에 대한 공개가 이루어지지 않고 있기 때문이다. 안드로이드는 버전이 올라갈수록 보안과 관련된 부분을 강화하고 있다.

관련 링크

TMapModule.java 파일 작성하기

package com.n00nietzsche.fooddeliveryapp;

import android.util.Log;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.skt.Tmap.TMapTapi;
import org.jetbrains.annotations.NotNull;
import java.util.HashMap;

public class TMapModule extends ReactContextBaseJavaModule {
    TMapModule(ReactApplicationContext context) {
        super(context);
        // 모듈 로딩 시 실행되는 부분
        TMapTapi tMapTapi = new TMapTapi(context);
        tMapTapi.setSKTMapAuthentication("API키"); // API 키 넣기
    }

    @NotNull
    @Override
    public String getName() {
        // 패키지 이름
        return "TMap";
    }

    @ReactMethod
    public void openNavi(String name, String longitude, String latitude, String vehicle, Promise promise) {
        TMapTapi tMapTapi = new TMapTapi(getReactApplicationContext());
        boolean isTMapApp = tMapTapi.isTmapApplicationInstalled();
        if (isTMapApp) {
            HashMap pathInfo = new HashMap();
            pathInfo.put("rGoName", name);
            pathInfo.put("rGoX", longitude);
            pathInfo.put("rGoY", latitude);
            pathInfo.put("rSOpt", vehicle.equals("MOTORCYCLE") ? "6" : "0");
            boolean result = tMapTapi.invokeRoute(pathInfo);
            if (result) {
                promise.resolve(true);
            } else {
                promise.resolve(true);
            }
        } else {
            promise.resolve(false);
        }
    }
}

실제 티맵 모듈을 구현하는 부분이다.

TMapPackage.java 파일 작성하기

package com.n00nietzsche.fooddeliveryapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class TMapPackage implements ReactPackage {

   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
       return Collections.emptyList();
   }

   @Override
   public List<NativeModule> createNativeModules(
           ReactApplicationContext reactContext) {
       List<NativeModule> modules = new ArrayList<>();

       modules.add(new TMapModule(reactContext));

       return modules;
   }
}

사실상 별다른 로직 없이 티맵 모듈을 감싸주는 패키징부분이다.

MainApplication.java 내용 수정하기

import com.n00nietzsche.fooddeliveryapp.TMapPackage; 패키지를 import 해준다.

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  packages.add(new TMapPackage());
  return packages;
}

TMapPackage 객체를 추가해준다.

src/modules/TMap.ts 파일 작성하기

import { NativeModules } from "react-native";
const { TMap } = NativeModules;

interface TMapInterface {
  openNavi(
    name: string,
    long: string,
    lat: string,
    naviVehicle: string
  ): Promise<boolean>;
}

export default TMap as TMapInterface;

타입 인터페이스를 작성해준다.

.tsx 파일에서 이용하기

onClick={() => {
  TMap.openNavi(
    '출발지',
    start.longitude.toString(),
    start.latitude.toString(),
    'MOTORCYCLE',
  ).then(data => {
    console.log('TMap callback', data);
    if (!data) {
      Alert.alert('알림', '티맵을 설치하세요.');
    }
  });
}}

레퍼런스

https://tmapapi.sktelecom.com/main.html#android/guide/androidGuide.sample1