wix engineering 블로그의 Creating a Native Module in React Native 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/cover.png

 

네이티브 모듈이란 무엇입니까?

네이티브 모듈은 각 플랫폼에 대해 기본적으로(natively) 구현되는 일련의 자바 스크립트 함수입니다(이 경우 iOS 및 Android). 네이티브 기능이 필요한 경우 또는 리엑트 네이티브에 모듈이 없거나 네이티브 성능이 더 좋은 경우에 사용됩니다.

NOTE: jsx 내부에서 사용할 수있는 네이티브 뷰를 만드는 네이티브 UI 컴포넌트(Native UI Component)라고 불리는 것도 있습니다. 네이티브 모듈(여기서 수행 할 작업)에서는 React Native 응용 프로그램에서 호출 할 함수만 만들 수 있습니다.

우리의 할 일

이 예에서는 토스트 메커니즘을 단계별로 구현합니다. 당신이 할일은:

  • 단일 기능show(title:)로 모듈을 작성하여 Android 및 iOS에서 “native toast”를 디스플레이 하세요. “native toast”는 다음과 같습니다.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-0.png

  • 해당 모듈을 라이브러리에 싸서(Wrap) npm에 추가하세요.
  • 이 라이브러리를 호출하여 버튼 클릭 시 토스트를 디스플레이하는 응용 프로그램을 작성하세요.

Android에서는 기본 Android 토스트 명령을 사용합니다.

iOS에서는 네이티브 UIAlertController를 사용합니다.

최종 코드는 [여기]에서 볼 수 있습니다.

 

시작하기

  • 모듈 프로젝트 생성

리액트 네이티브 프로젝트를 만드는 경우와 마찬가지로 react-native-create-library라는 리액트 네이티브 모듈을 만드는 템플릿이 있습니다.

터미널을 열고 프로젝트를 넣을 폴더로 이동하세요.

리액트 네이티브 모듈 프로젝트를 생성하려면 install react-native-create-library 명령을 사용하세요.

npm install -g react-native-create-library

그다음 모듈을 작성하십시오.

react-native-create-library -—platforms ios,android NativeToastLibrary

새 모듈 프로젝트는 다음과 같아야 합니다.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-1.png

보시다시피 Android, iOS 및 Windows 플랫폼이 포함되어 있습니다.

Windows를 사용하지 않기 때문에 프로젝트와 package.json 파일에서 Windows 폴더를 삭제하고 “peerDependencies” 아래 “react-native-windows”가 포함 된 행을 삭제하십시오.

 

네이티브 파일 설정

네이티브 모듈을 사용하기 전에 약간의 설정이 필요합니다. 이 튜토리얼 외부(outside)에서는 이 설정이 필요하지 않습니다. 기본 모듈에는 사용하는 파일이 포함되어야 합니다. 그러나 우리는 여기서 직접 모든 작업을 수행하고 있으므로 이를 설정하여 코딩 할 때 기능이 자동으로 완료됩니다.

  • 안드로이드에서 토스트 설정

Android에서 Toast를 디스플레이하기 위해 Android Toast object를 사용합니다. 컨텍스트를 얻기 위해 우리는getReactApplicationContext 함수를 사용할 것입니다.

Android Studio를 사용하여 Android 폴더를 엽니다.

먼저 Android Studio 제안을 사용하여 빌드 프로세스를 실행하세요 (아 경우 에는 build.gradle 파일의 클래스 경로 값을 com.android.tools.build:gradle:2.3.2, buildToolsVersion을 25.0.0으로 변경).

다른 네이티브 라이브러리와 이름이 충돌하지 않도록 패키지 이름을 변경하세요.

  • java 디렉토리에서 com.reactlibrary 디렉토리의 이름을 com.reactlibrarynativetoast로 바꾸세요.
  • 또한 RNNativeToastLibraryModule, RNNativeToastLibraryPackage, AndroidManifest.xml 파일을 업데이트하십시오. com.reactlibrary에서 com.reactlibrarynativetoast로 변경하십시오.

이제 함수를 추가 할 수 있습니다. RNNativeToastLibraryModule 파일에서 다음 코드를 추가하십시오

@ReactMethod
public void show(String text) {
  Context context = getReactApplicationContext();
  Toast.makeText(context, text, Toast.LENGTH_LONG).show();
}

@ReactMethod 마크는 리액트 네이티브에 대한 메서드를 공개로 디스플레이하여 JS 프로젝트에서 사용할 수 있도록 합니다.

  • iOS에서 토스트 설정

iOS에는 Toast 객체가 없지만 비슷한 기능을 가질 수 있는 UIAlertController가 있습니다 (actionSheet 스타일을 사용하고 일정한 시간이 지나면 해제).

UIAlertController를 디스플레이하려면 앱의 최상위 UIViewController를 가져 와야 합니다. 보이지 않는 UIViewController로 새로운 UIWindow를 만들어서 얻을 수 있습니다.

Xcode에서 RNNativeToastLibrary.xcodeporj를 여십시오.

Xcode에서 RCTBridgeModule.h를 인식하지 못한다는 오류가 발생합니다 (그렇지 않으면 다음 단계를 계속하십시오). 이 문제를 해결하려면 프로젝트 디렉토리와 peerDependencies 행에서 package.json 파일을 추가하십시오.

"devDependencies": {
  "react-native": "0.41.2"
},

버전은 peerDependencies와 동일해야합니다.

이제 터미널을 열고 프로젝트 디렉토리로 이동하여 npm install을 입력하세요.

프로젝트 디렉토리를 다시 보면 node_modules 디렉토리가 추가 된 것을 볼 수 있습니다.

 

1. React Native iOS 프로젝트 추가

Xcode로 돌아 가세요. 일반적으로 리액트 네이티브 라이브러리가 있는 예제 프로젝트 내에 네이티브 모듈을 만듭니다. Android에 있는 gradle이 없기 때문에 RN iOS 프로젝트 및 라이브러리를 추가합니다.

RNNativeToastLibrary (1)를 열고 Build Phases (2) 탭을 선택하십시오. Link Binary with Libraries (3)을 클릭 한 다음 더하기 버튼 (4)을 클릭하세요.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-2.png

팝업 창에서 기타 추가… 단추를 클릭하고 node_modules > react-native > React > React.xcodeproj를 선택하세요.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-3.png

 

2. 리액트 네이티브 iOS 라이브러리 추가

상단의 RNNativeToastLibrary (1) 프로젝트를 열고 (파란색 아이콘 사용) Build Phases (2) 탭을 선택하십시오. 라이브러리와 바이너리 연결 (3)을 클릭 한 다음 더하기 버튼 (4)을 클릭하세요.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-4.png

팝업 창에서 다음과 같이 React taarget 인 libReact.a를 선택하십시오.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-5.png

프로젝트를 빌드하십시오 (Command + B). RCTBridgeModule.h가 인식되는 것을 볼 수 있습니다.

 

3. 준비된 iOS 모듈을 프로젝트에 복사

여기에서 iOS 파일을 다운로드 하세요.

zip 파일의 압축을 풀어주세요. 2개의 파일 (IOSNativeToast.h, IOSNativeToast.m)이 있어야 합니다. 해당 파일을 iOS 디렉토리에 복사하세요.

이제 XCode로 돌아갑니다.

RNNativeToastLibrary 프로젝트 파일 (파란색 아이콘)을 마우스 오른쪽 버튼을 클릭하고 Add file to RNNativeToastLibrary 선택하십시오.

팝업 창에서 2개의 파일을 선택하고 추가 버튼을 누르면 프로젝트에서 파일을 볼 수 있습니다

 

4. iOS 토스트 모듈 구현

RNNativeToastLibrary.m 을 여십시오. import 아래에 IOSNativeToast 프로퍼티(@property)를 추가하세요.

#import “IOSNativeToast.h”
@interface RNNativeToastLibrary()
@property (nonatomic, retain) IOSNativeToast *toast;
@end

그런 다음 객체 init에서 초기화 합니다. @implementation RNNativeToastLibrary 블록 안에 함수를 추가하세요.

- (instancetype)init {
  self = [super init];
  if (self) {
    self.toast = [[IOSNativeToast alloc] init];
  }
  return self;
}

init 메소드를 대체하기 때문에 requireMainQueueSetup도 구현해야합니다 (메인 스레드에서 실행하려는 경우).

@implementation RNNativeToastLibrary 블록 내에 이 함수를 추가하세요.

+ (BOOL)requiresMainQueueSetup
{
  return YES;
}

마지막으로 @implementation RNNativeToastLibrary 블록의 끝에 함수 를 추가하세요.

RCT_EXPORT_METHOD(show:(NSString *)text)
{
  [self.toast showToast:text];
}

새 RNNativeToastLibrary.m 파일은 다음과 같아야 합니다.

 

라이브러리를 NPM에 업로드

라이브러리 이름을 고유 한 이름으로 변경하십시오.

package.json 파일을 열고 이름 아래 — react-native-native-toast-libraryreact-native-native-toast-library-XXXX로 변경하십시오. 여기서 XXXX는 고유 한 부분입니다.

명령을 사용하여 공개 npm으로 이동

npm config set registry https://registry.npmjs.org/

npm 계정이 없으면 [여기]에서 만드십시오.

프로젝트 디렉토리에서 터미널을 열고 npm adduser를 입력 한 다음 사용자 이름과 세부 사항을 입력하세요.

마지막으로 npm publish를 입력하여 코드를 게시하세요.

 

토스트 사용

  • 버튼을 클릭 할 때 토스트를 디스플레이 할 응용 프로그램 만들기

프로젝트 상위 디렉토리에서 터미널을 열고 react-native init RNNativeToastExample을 입력하십시오.

package.json 파일을 열고 종속성 아래에 “react-native-native-toast-library-XXXX”:”1.0.0” 를 추가하세요.

JSON 형식을 유지하려면 줄 앞에 쉼표를 추가해야 합니다.

XXXX는 고유 한 부분이며 (NPM 파트의 라이브러리 업로드 참조) “1.0.0”은 라이브러리의 버전입니다 (기본 버전이므로 변경하면 고유 한 값을 대신 사용함).

RNNativeToastExample 프로젝트에서 터미널을 열고 npm install을 입력하십시오.

  • 응용 프로그램을 기본 라이브러리에 연결

응용 프로그램이 고유 라이브러리를 “알기”위해서는 link 명령으로 사용하는 각 플랫폼에 고유 모듈을 링크 해야 합니다.

RNNativeToastExample 프로젝트에서 터미널을 열고 react-native link react-native-native-toast-library-XXX를 입력하세요 (XXXX는 고유 한 부분입니다. 여기를 보세요).

  • 안드로이드 연결 확인

Android Studio에서 RNNativeToastExample Android 프로젝트를 열고 setting.gradle을 여십시오.

다음을 보세요

include ':react-native-native-toast-library-XXXX'
project(':react-native-native-toast-library-XXXX').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-native-toast-library-XXXX/android')

build.gradle (Module: app)에서 다음을 볼 수 있습니다.

compile project('**:react-native-native-toast-library'**)

compile을 implementation으로 변경할 수 있습니다 (compile은 이전 구문입니다).

MainApplication을여십시오 (app > java > com.rnnativetoastexample). getPackages 메소드 아래에 보여야 합니다.

new RNNativeToastLibraryPackage()

  • iOS 연결 확인 (Check iOS linking)

XCode의 iOS 프로젝트에서 RNNativeToastExample을 엽니다.

라이브러리 폴더 아래에 RNNativeToastLibrary 프로젝트 (1)가 디스플레이됩니다.

RNNativeToastExample 프로젝트 파일 (2) > Build Phases (3) > Link Binary with Libraries (4) 를 클릭하십시오.

목록에 libRNNativeToastLibrary.a 파일 (5)이 디스플레이됩니다.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-6.png

중요한 참고 사항 : 이와 같은 간단한 프로젝트 및 라이브러리에서는 linking이 작동해야 합니다. 프로젝트나 라이브러리가 표준이 아닌 경우 연결 명령이 완전히 작동하지 않을 수 있습니다. 이 경우 해당 작업을 수동으로 수행해야 합니다.

 

화면 만들기

App.js 파일의 내용을 이것으로 바꾸고 ‘react-native-native-toast-library’; 에서 import RNNativeToastLibrary; 줄을 바꾸십시오. ‘react-native-native-toast-library-XXXX’에서 RNNativeToastLibrary를 가져옵니다. 여기서 XXXX는 고유 한 부분입니다 (여기 참조).

다음 단계에서 볼 수 있듯이 화면에는 버튼과 textInput이 있습니다.

버튼을 누르면 textInput 내용과 함께 토스트가 디스플레이됩니다.

 

거의 끝났습니다.

  • 앱을 실행

마지막 단계는 두 플랫폼 모두에서 RNNativeToastExample을 실행하고 토스트를 디스플레이하는 것입니다.

(라이브러리 테스트). 지금 해봅시다.

RNNativeToastExample 프로젝트에서 터미널을 열고 react-native run-android를 입력하여 android 앱을 디스플레이 한 다음 react-native run-ios를 입력하여 iOS 앱을 디스플레이 하세요.

다음은 확인해야 할 사항입니다.

http://devh.kr/assets/images/post/Creating%20a%20Native%20Module%20in%20React%20Native/native-module-7.png

Optional

npm 저장소에서 라이브러리를 제거하려면 72시간이 걸립니다.

터미널을 열고 npm unpublish react-native-native-toast-library-XXXX를 입력하십시오 (여기서 XXXX는 고유 한 부분입니다-여기 참조).