[컴][안드로이드] React Native App - react-navigation

react-navigation

여러 페이지(Activity) 를 사용하는 App 을 만들 것이라면 react-navigation 이 필요하다. 아래 명령어로 설치할 수 있다.

>npm install --save react-navigation
>npm install --save react-native-gesture-handler
>react-native link react-native-gesture-handler

react-native link

어떤 library 들은 native code 로 작성되었을 수 있다. 이 경우에 이 native code 의 library 를 우리가 만드는 app 에 넣어줘야 한다. 그것을 위해 하는 것이 linking libraries 이다. 

react-native-gesture-handler 를 link 하면서 잠깐 봐보자.

우선 link 는 아래처럼 react-native link 를 해주면 된다.

c:\newApp>react-native link react-native-gesture-handler
rnpm-install info Linking react-native-gesture-handler ios dependency
rnpm-install info Platform 'ios' module react-native-gesture-handler has been successfully linked
rnpm-install info Linking react-native-gesture-handler android dependency
rnpm-install info Platform 'android' module react-native-gesture-handler has been successfully linked

변경된 내역

이제 react-native link 를 통해 무엇이 바뀌었는지 한번 봐보자.

<newApp>\android\app\build.gradle
<newApp>\android\app\src\main\java\com\newapp\MainApplication.java
<newApp>\android\app\src\main\res\values\strings.xml
<newApp>\android\settings.gradle
<newApp>\ios\newApp.xcodeproj\project.pbxproj
<newApp>\node_modules\.cache\@babel\register\.babel.7.2.2.development.json

위의 파일들이 변경된다. 대략적으로 보면 build.gradle 의 dependency 에 아래와 같은 부분이 추가된 것을 확인할 수 있다.

dependencies {
    compile project(':react-native-gesture-handler')
    ...

Android 에서 추가작업

MainActivity.java 를 변경해 줘야 한다.

• <newApp>\android\app\src\main\java\com\newapp\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);
+      }
+    };
+  }
}

References

1. Navigating Between Screens · React Native
2. Getting started · React Navigation
3. Hello React Navigation · React Navigation