Java를 사용하여 React Native에서 네이티브 모듈 만들기

React Native에서 네이티브 모듈은 Java/Swift/ObjectiveC로 작성된 코드 조각으로, JavaScript 코드에서 카메라, 블루투스 및 기타 네이티브 API 액세스와 같은 플랫폼별 기능에 액세스하는 데 사용됩니다.

네이티브 모듈은 언제 생성합니까?

React Native 모듈에 없는 기본 기능에 액세스하려고 할 때.

React Native 프로젝트에서 기존 java/swift 라이브러리 코드를 재사용할 계획입니다.

다중 스레드 코드 작성.

DB 적중, 이미지 처리, 암호화 및 JavaScript 메모리 누수로 이어지는 기타 비용이 많이 드는 작업과 같이 시간이 오래 걸리는 작업의 경우.

예를 들어 암호화/복호화의 사용 사례를 살펴보십시오.

일반적으로 모든 사람은 JavaScript 암호화 라이브러리를 찾아 React Native 프로젝트에 추가합니다. 여기에서 암호화/복호화는 JS 레이어에서 발생합니다. 짧은 텍스트를 암호화할 때 더 성능이 좋아 보입니다. 큰 텍스트를 암호화하는 동안 암호화 라이브러리는 처리하는 데 더 많은 시간이 소요될 수 있으며, 이는 UI 스레드 및 성능 문제를 차단하는 경향이 있습니다.

커스텀 네이티브 모듈을 생성함으로써 위의 문제를 해결할 수 있습니다. 암호화 로직은 JS 레이어에서 네이티브 레이어로 이동해야 합니다. 그래도 동일한 Java 버전의 암호화 라이브러리를 사용할 수 있습니다.

사용자 정의 네이티브 모듈을 생성하는 단계(위의 암호화 사용 사례용):

Java를 사용하는 Android의 경우:
1. EncryptionModule.java 폴더 안에 android/app/src/main/java/com/your-app-name라는 새로운 자바 파일을 생성하고 아래 내용을 추가합니다.

package com.your-app-name;

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

public class EncryptionModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
        return "Encryptor";  // Name of the Native Modules.
    }
}

2. encryption 메서드를 EncryptionModule 에 추가합니다.

/**
* @param plainText Text to be encrypted(from JS layer)
*/
@ReactMethod
public void encrypt(String plainText, Promise promise) {
    try {
      // Add your encryption logic here 
      // (can use any JAVA encryption library or use default)
      String encryptedText = plainText + "This is encrypted text";
      promise.resolve(encryptedText); // return encryptedText
    } catch (Exception e) {
      promise.reject("ENCRYPTION_FAILED", "Encryption Failed");
    }
}

3. decryption 메소드를 EncryptionModule 에 추가하십시오.

/**
* @param encryptedText Text to be decrypted(from JS layer)
*/
@ReactMethod
public void decrypt(String encryptedText, Promise promise) {
    try {
      // Add your decryption logic here 
      // (can use any JAVA decryption library or use default)
      String decryptedText = encryptedText + "This is decrypted text";
      promise.resolve(decryptedText); // return decryptedText
    } catch (Exception e) {
      promise.reject("DECRYPTION_FAILED", "Decryption Failed");
    }
}

4. 위 모듈 등록: EncryptionPackage.java 폴더 안에 android/app/src/main/java/com/your-app-name라는 새 Java 파일을 만들고 아래 내용을 추가합니다.

package com.your-app-name;

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;

public class EncryptionPackage implements ReactPackage {

@Override
public List<ViewManager> createViewManagers(
  ReactApplicationContext reactContext
) {
    return Collections.emptyList();
}

@Override
public List<NativeModule> createNativeModules(
      ReactApplicationContext reactContext
) {
    List<NativeModule> modules = new ArrayList<>();
    // Register the encryption module
    modules.add(new EncryptionModule());
    return modules;
  }
}

5. 위의 패키지를 MainApplication.Java ( android/app/src/main/java/com/your-app-name/MainApplication.Java )에 추가합니다.

...
import com.your-app-name.EncryptionPackage;
...

protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Add the encryption package here
  packages.add(new EncryptionPackage()); 
  return packages;
}

6. 기본 모듈에 액세스하기 위한 사용자 정의 JS 래퍼 생성: 프로젝트 루트 디렉토리 아래에 Encryptor.js라는 새 JS 파일을 생성합니다.

import {NativeModules} from 'react-native';

const Encryptor = NativeModules.Encryptor;

export const encrypt = (plainText) => {
  // Add your additional custom logic here
  return Encryptor.encrypt(plainText);
};

export const decrypt = (encrptedText) => {
  // Add your additional custom logic here
  return Encryptor.decrypt(encrptedText);
};
// You can directly export this and access it 
// like Encryptor.enrypt/Encryptor.decrypt
export default Encryptor; 

7. 마지막으로 아래와 같은 JS 파일에서 액세스Encryptor합니다.

import {encrypt, decrypt} from './Encryptor';

const encryptText = await encrypt('some text');

const decryptText = await decrypt('encrypted text');

결론

시간이 많이 걸리는 작업을 위해 기본 모듈을 생성하거나 기본 특정 API에 액세스해 보겠습니다.