[React Native] 네이티브 모듈 만들기

👉 네이티브 모듈이란

React Native에서 지원하지 않는,

Android,IOS 만의 전용 기능을 가진 코드

 

👉 Android 네이티브 모듈만들기 ( Java )

 

Android Studio > ReactNative 프로젝트 / android 폴더 열기

 

모듈 클래스 만들기

// app/java/com.nativemoduleworkshop/ToastModule.java

package com.nativemoduleworkshop;

import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.HashMap;
import java.util.Map;

// ReactNative Java 모듈 상속
public class ToastModule extends ReactContextBaseJavaModule {

	// 생성자로 초기값 설정 - 항상 해주어야함
    ToastModule(ReactApplicationContext context) {
        super(context);
    }

    /* getName 메서드
    - 네이티브 모듈 이름 정하기
    - 이후에 js 코드에서 불러올 모듈 이름

    import { NativeModules } from 'react-native';
    const { ToastModule } = NativeModules;
     */
    @Override
    public String getName(){
        return "ToastModule";
    }

    /*
    @ReactMethod 를 붙여주면,
    이후 js 코드에서 호출 할 수 있다.

    @를 붙여주는 문법 - 데코레이터 문법

    message를 받아, 화면에 알림을 띄워주고
    duration을 받아, 화면에 보여줄 시간을 정한다 ( 0 짧음, 1 김 )
    
    ToastModule.show(message, duration);
    */
    @ReactMethod
    public void show(String message, int duration) {
        // 생성자로 설정한, context 가져오기
        ReactApplicationContext context = getReactApplicationContext();
        //
        Toast toast = Toast.makeText(context, message, duration);
        toast.show();
    }

    /*
    java에서 선언한 상수를,
    js에서 사용할 수 있도록 내보내기
    
    ToastModule.SHORT
     */
    @Override
    public Map<String, Object> getConstants(){
        final Map<String, Object> constants = new HashMap<>();
        constants.put("SHORT", Toast.LENGTH_SHORT);
        constants.put("LONG", Toast.LENGTH_LONG);
        return constants;
    }
}

 

ReactNative에 연결할 패키지 만들기

// app/java/com.nativemoduleworkshop/ToastPackage.java

package com.nativemoduleworkshop;

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;

/*
ReactNative에 등록할 패키지를 만들기
 */
public class ToastPackage implements ReactPackage {
    /*
    ArrayList를 만들고,
    그 안에 ToastModule을 등록해 반환
     */
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    }

    /*
    네이티브 UI 컴포넌트를 만들어서 등록
    지금은 필요없으므로, 빈 컴포넌트 반환
     */
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext){
        return Collections.emptyList();
    }
}

 

만든 패키지 등록하기

// app/java/com.nativemoduleworkshop/MainApplication.java

public class MainApplication extends Application implements ReactApplication {

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

        /*
        패키지를 받아오는 부분
         */
        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          
          // toast 패키지 추가
          packages.add(new ToastPackage());
          
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() { ... }
      };
      
      ...
}

 

연결한 패키지 사용하기

// 프로젝트/App.js
import { NativeModules } from 'react-native'

const App = () => {
	const { ToastModule } = NativeModules;
    ToastModule.show('Hello Module!', ToastModule.SHORT);
	return ...
}

 

👉 코틀린으로 만들기

 

React Native 프로젝트 코틀린으로 변경하기

프로젝트 / android / build.gradle 파일 수정

...
buildscript {
  ext {
    buildToolsVersion = "31.0.0"
    minSdkVersion = 21
    compileSdkVersion = 31
    targetSdkVersion = 31
    kotlinVersion = "1.5.0" // 코틀린 추가
    ...
  }
  
  ...
  
  dependencies {
    classpath("com.android.tools.build:gradle:7.1.1")
    classpath("com.facebook.react:react-native-gradle-plugin")
    classpath("de.undercouch:gradle-download-task:5.0.1")
    // 코틀린 추가
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
    ...
  }
  ...
}

 

프로젝트 / android / app / build.gradle 파일 수정

...

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlinVersion"
    ...
}
// 맨 마지막 줄 아래에 작성
apply plugin: 'kotlin-android'

 

모듈 만들기

// 프로젝트/app/java/com.nativemoduleworkshop/BrightnessModule.kt
package com.nativemoduleworkshop

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

// ReactContext 모듈 상속 받기 ( 코틀린 방식 )
class BrightnessModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {
    // 모듈 이름 지정
    override fun getName(): String {
        return "BrightnessModule"
    }

    // 상수 내보내기
    override fun getConstants(): MutableMap<String, Any>? {
        val constants = HashMap<String, Any>()
        constants.put("SAMPLE_VALUE", "Hello World")
        return constants;
    }

    // 모듈에서 사용할 메서드 정의
    @ReactMethod
    fun getBrightness(){

    }

    @ReactMethod
    fun setBrightness(brightness: Float){

    }
}

 

패키지 만들기

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager
import java.util.Collections
import kotlin.collections.ArrayList

class BrightnessPackage : ReactPackage {
    // 모듈 등록
    override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
        val modules = ArrayList<NativeModule>()
        modules.add(BrightnessModule(reactContext))
        return modules;
    }

    // 네이티브 UI 컴포넌트 등록
    override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<*, ReactShadowNode<*>>> {
        return Collections.emptyList();
    }
}

 

패키지 등록하기

Java와 동일한 방법으로 패키지 등록하기

// app/java/com.nativemoduleworkshop/MainApplication.java

public class MainApplication extends Application implements ReactApplication {

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

        /*
        패키지를 받아오는 부분
         */
        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          
          // toast 패키지 추가
          packages.add(new ToastPackage());
          // Brightness 패키지 추가
          packages.add(new BrightnessPackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() { ... }
      };
      
      ...
}

 

---

👉 IOS 네이티브 모듈만들기 ( Objective.c )

 

XCode > ReactNative 프로젝트 / ios / 프로젝트.xcworkspace 열기

 

Header File 생성

프로젝트 / 프로젝트 폴더 우클릭 > New FIle > Header File

파일명 : RCTAlertModule.h

위치 (경로) : ios / 프로젝트 ( AppDelegate.h 파일이 있는 위치 )

타겟 (Targets) : 프로젝트, 프로젝트Test 둘다 선택

 

Header File 작성, 저장

// RCTBridgeModule 헤더파일 불러오기
#import <React/RCTBridgeModule.h>

// js 호출 가능한 메서드 만들기 위한 헤더파일
#import <UIKit/UIKit.h>

// RCTBridgeModule 객체를, RCTAlertModule라는 이름으로 사용하겠다.
@interface RCTAlertModule : NSObject <RCTBridgeModule>
@end

 

Objective.c File 생성

프로젝트 / 프로젝트 폴더 우클릭 > New FIle > Objective.c File

파일명 : RCTAlertModule

위치 (경로) : ios / 프로젝트 ( AppDelegate.h 파일이 있는 위치 )

타겟 (Targets) : 프로젝트, 프로젝트Test 둘다 선택

 

Objective.c File 작성, 저장

 ,/// RCTAlertModule.m

// 헤더파일 가져오기
#import "RCTAlertModule.h"

// 헤더파일에서 작성한 RCTAlertModule 상속 받기
@implementation RCTAlertModule

/* 네이티브 모듈 내보내는 메서드
 인자로 모듈의 이름을 지정한다.
 인자를 지정하지 않으면, 클래스 이름에서 RCT를 제외한 부분을 이름으로 사용한다 (AlertModule)
 인자를 문자열 ""로 지정하지 말것!
*/
RCT_EXPORT_MODULE();

// js에서 호출 가능한 메서드 만들기
RCT_EXPORT_METHOD(alert:(NSString *)message)
{
  UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"My Alert"message:@"This is an alert." preferredStyle:UIAlertControllerStyleAlert];
  
  UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@:"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) {}];
  
  [alert addAction:defaultAction];
  
  UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;
  
  // UI관련 작업을 main스레드에서 실행
  dispatch_async(dispatch_get_main_queue(), ^{
    [rootViewController presentViewController:alert animated:YES completion:nil]
  })
}

// 상수 내보내기
- (NSDictionary *)constantsToExport
{
  return @{
    @"STRING_VALUE": @"Hello World",
    @"NUMBER_VALUE": @(15)
  };
}

// 모듈이 js 코드를 실행하기 전에, main스레드에서 상수 초기화 하기
+ (BOOL)requiresMainQueueSetup
{
  return YES;
}

@end

 

모듈 사용하기

// 프로젝트/App.js
import { NativeModules } from 'react-native'

const App = () => {
    const { AlertModule } = NativeModules;
    AlertModule.alert('Hello Module!');
    console.log(AlertModule.NUMBER_VALUE);
    return ...
}

 

👉 Swift로 만들기

 

XCode > ReactNative 프로젝트 / ios / 프로젝트.xcworkspace 열기

 

Swift File 생성

프로젝트 / 프로젝트 폴더 우클릭 > New FIle > Swift File

파일명 : BrightnessModule.swift

위치 (경로) : ios / 프로젝트 ( AppDelegate.h 파일이 있는 위치 )

타겟 (Targets) : 프로젝트, 프로젝트Test 둘다 선택

 

Create Bridging Header 생성 ( 버튼 클릭 )

// NativeModuleWorkshop-Bridging-Header.h
#import "React/RCTBridgeModule.h"

 

Swift File 작성, 저장

dfsdf