React Native Package 설치 및 설정

 

react native 0.60 이상버전에서는 자동 link 걸리기 때문에 link명령어는 수행할 필요가 없다
Window에서 안드로이드를 개발하는 기준으로 설명한다

React Native Package 설치 및 설정

이를 설치하기 이전에

• android studio
• react native
• node js
• yarn (자바스크립트 패키지 설치)

가 준비되어 있어야 한다.
https://facebook.github.io/react-native/docs/getting-started
여기에 설치방법이 자세하게 설명되어 있다

그 이후 프로젝트를 하면서 필요한 패키지를 설치한다
네이버 로그인 api, 네이버 map api를 사용과 image, navigation을 사용하기 위해 다음과 같은 패키지가 필요하다.

설치할 목록은 다음과 같다

• npm install react-navigation
• npm install react-native-gesture-handler
• npm install react-native-nmap --save
• npm install react-native-ccs-naver-login
• yarn add react-native-image-picker

react-navigation

설치 안내 페이지 :
https://reactnavigation.org/docs/en/getting-started.html

npm install react-navigation
npm install react-native-gesture-handler

react-navigation과 react-native-gesture-handler 를 설치한 후,

android/app/src/main/java.com/MainActivity.java 에 (+) 내용을 추가한다

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

홈페이지에서는 react-native link react-native-gesture-handler 는 버전이 0.60 이상이면 안해도 된다했지만, 이상하게 안하면 에러가 난다.
그래서 만약에 gesture부분에서 에러가 나는 것 같으면 한번 시도해보는 것도 방법이다
​

react-native-nmap

설치 안내 페이지 & 참고페이지 :

• https://github.com/QuadFlask/react-native-naver-map
• https://navermaps.github.io/android-map-sdk/guide-ko/1.html
• https://zeakd.github.io/react-naver-maps/#/React%20Naver%20Maps?id=getting-started

npm install react-native-nmap --save;
# react-native 0.60 미만일 경우 링크가 필요합니다
# react-native link react-native-nmap;

npm install 후

/android/build.gradle

allprojects {
    repositories {
        google()
        jcenter()

        // 네이버 지도 저장소
        maven {
            url 'https://navercorp.bintray.com/maps'
        }
    }
}

/android/app/build.gradle

dependencies {

// 네이버 지도 SDK

    implementation (http://m.naver.maps:map-sdk:3.4.0'/)
}

​
/android/app/src/AndroidManifest.xml

<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>

react-native-ccs-naver-login

설치 안내 페이지 & 참고페이지 :

• https://www.npmjs.com/package/react-native-ccs-naver-login

• https://github.com/creamcookie/react-native-naver-login/blob/83089d7036524faf7bfa1650e26dc7dde11063cf/example/android/app/src/main/java/com/nhn/android/oauth/test/MainApplication.java

​npm install react-native-ccs-naver-login --save

저기 첫번째 참고 사이트에서는 MainActivity.java에 import하고 getPackages()에 추가하라곤 하지만
내 프로젝트에서는 MainApplication에 getPackages가 있었다. 그래서 찾은 두번째 예시를 참고했더니 실행이 잘된다

package com.nhn.android.oauth.test;

import android.app.Application;

import com.facebook.react.ReactApplication;
import cc.creamcookie.rn.naver.login.RNCNaverLoginPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RNCNaverLoginPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

android/settings.gradle

include ':react-native-ccs-naver-login'
project(':react-native-ccs-naver-login').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-ccs-naver-login/android')

android/app/build.gradle
dependencies 밑에

 compile project(':react-native-ccs-naver-login')

를 추가시키면
모든 패키지 설치와 설정이 완료된다