ReactNative 네이티브 모듈 만들기 (create-react-native-module 사용)

프로젝트 생성

1. 모듈용 템플릿 도구 create-react-native-module 설치

   npm install -g react-native-cli yarn
   npm install -g create-react-native-module

2. 프로젝트 생성

   create-react-native-module --prefix RN --package-identifier [ 패키지 식별자 ] --generate-example [ 프로젝트 이름 ]

   • --prefix : 라이브러리 접두사

   • --package-identifier : 안드로이드 패키지 식별자 (ex : com.righthot)

   • --view : 매우 간단한 기본 뷰 구성 요소로 모듈 생성 (미 입력시 기본 모듈형태 프로젝트 생성)

   • --generate-example : 예제 프로젝트를 생성하고 라이브러리 모듈을 해당 모듈에 링크합니다.

3. 확인

   아래 경로에서 example 프로젝트에 생성된 모듈이 의존되어있는 걸 확인 할 수 있다.

   example/package.json

     "dependencies": {
       ...
       "react-native-[ 프로젝트 이름 ]": "file:../"
     },

4. 설치

   root/example

   yarn install

5. ERROR

   • npm 설치시 아래와 같은 에러가 있으므로 yarn 설치 권장

     Failed to construct transformer: TypeError: fsevents is not a function

     • yarn 으로 설치

       1. removing node_module and yarn.lock

       2. yarn install

       3. yarn start

   • ANDROID 빌드 오류

     …Package.java

     RNSampleToastPackage is not abstract and does not override abstract method createJSModules() in ReactPackage

     위 메시지가 뜬다고해서 createJSModules 를 추가 하면 빌드 안되니 유의

     아래 코드 추가

모듈 코드 작성

• 안드로이드

  android studio 사용 /android 폴더 열기

  • 소스코드 작성

    @ReactMethod
    public void myToastShow(String text) {
        Toast.makeText(reactContext, text, Toast.LENGTH_LONG).show();
    }

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

    • Context : ReactApplicationContext 으로 가져올 수 있습니다.

    • Callback : 모듈에서 클라이언트로 전달 가능한 Javascript 콜백 인터페이스

  • aar 추가

    1. android/libs 폴더 생성

       폴더내에 aar 파일 추가

    2. build.gradle

       repositories {
         ...
         if (project == rootProject) {
             flatDir { dirs 'libs' }
         }else{
             flatDir { dirs "$rootDir/../node_modules/[ 프로젝트 이름 ]/android/libs" }
         }
       }
       ​
       dependencies {
           ...
           implementation fileTree(dir: 'libs', include: ['*.aar'])
           compileOnly(name: '[ aar 파일명 ]', ext: 'aar')
       }

       • compileOnly 이 아닌 implementation 사용시 의존성 충돌때문에 react 프로젝트에서 aar을 못 찾을 수 있으니 주의.

• Example 에서 모듈 사용

  root/example/App.js

        <View style={styles.container}>
          <TouchableOpacity onPress={() => {
            RNPracticeToast.myToastShow("TOAST TEST !!!")
          }}>
            <Text style={styles.welcome}>☆RNPracticeToast example☆</Text>
          </TouchableOpacity>
        </View>

테스트

1. yarn remove [ 모듈 프로젝트명 ]

2. 다시 package.json 에 추가

3. yarn install

주의

• npm install 사용시 examples_postinstall.js 에 의해 프로젝트 구조가 바뀜

참고 사이트

https://reactnative.dev/docs/native-modules-setup

https://www.npmjs.com/package/create-react-native-module

http://www.devh.kr/2020/Creating-a-Native-Module-in-React-Native/