Рубрики
Без рубрики

Создание собственных модулей в React Native с использованием Java

В React Native собственные модули представляют собой фрагмент кода, написанный на Java / Swift / Objective C, который используется для… Помечено как react native, react, java, android.

В React Native собственные модули представляют собой фрагмент кода, написанный на Java/Swift/Objective C, который используется для доступа к специфичным для платформы функциям, таким как доступ к камере, Bluetooth и другим встроенным API-интерфейсам из кода JavaScript.

Когда создавать собственные модули?

  1. Когда мы пытаемся получить доступ к встроенным функциям, которых нет в модулях React Native.
  2. Планируете повторно использовать существующий код библиотеки java/swift в своем проекте React Native.
  3. Написание многопоточного кода.
  4. Для таких трудоемких задач, как попадание в базу данных, обработка изображений, шифрование и другие дорогостоящие операции, которые приводят к утечкам памяти JavaScript.

Например, возьмем пример использования шифрования/дешифрования:

Как правило, каждый найдет какую-нибудь библиотеку шифрования JavaScript и добавит ее в свой собственный проект React. Здесь шифрование/дешифрование будет происходить на уровне JS. Это выглядит более производительно при шифровании коротких текстов. При шифровании больших текстов библиотеке шифрования может потребоваться больше времени для обработки, что, как правило, блокирует поток пользовательского интерфейса и проблемы с производительностью.

Создавая собственные собственные модули, мы можем решить вышеуказанную проблему. Логика шифрования должна быть перенесена на собственный уровень со уровня JS. Тем не менее, мы можем использовать ту же java-версию библиотеки шифрования.

Шаги по созданию пользовательских встроенных модулей (для приведенного выше варианта использования шифрования):

Для Android с использованием Java: 1 . Создайте новый Java-файл с именем Создайте новый Java-файл с именем внутри папки android/app/src/main/java/com/имя вашего приложения

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. Добавьте метод шифрования в Модуль шифрования .

/**
* @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. Добавьте метод дешифрования в Модуль шифрования .

/**
* @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. Зарегистрируйте вышеуказанный модуль: Создайте новый Java-файл с именем EncryptionPackage.java внутри папки android/app/src/main/java/com/имя вашего приложения и добавьте содержимое ниже.

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 createViewManagers(
  ReactApplicationContext reactContext
) {
    return Collections.emptyList();
}

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

5. Добавьте вышеуказанный пакет в Основное приложение. Java ( android/приложение/src/основное/java/com/имя вашего приложения/Основное приложение. Java ).

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

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

6. Создайте пользовательскую оболочку JS для доступа к встроенным модулям: Создайте новый файл JS с именем Encryptor.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, как показано ниже.

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

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

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

Вывод

Давайте начнем создавать собственные модули для трудоемких операций или доступа к специфичным API-интерфейсам.

Оригинал: “https://dev.to/pandiarajan_n/how-to-create-and-add-nativemodules-in-react-native-using-java-2a93”

Читайте ещё по теме: