Как подружить React Native и Java код на Android

Необходимость работы с нативной частью приложения React Native обычно возникает тогда, когда какой-либо сервис не имеет специального api для RN. Таким образом, хороший разработчик должен уметь, как минимум, представление того, как работает нативная часть приложения. В данной статье будут приведены примеры работы взаимодействия приложения React Native c Android.

Нативный модуль

Для начала создадим новый класс в папке android/app/src/main/java класс CustomModule:

package com.awesomeproject;
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.Map;
import java.util.HashMap;

public class CustomModule extends ReactContextBaseJavaModule {
    CustomModule (ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @Override
    public String getName() {
        return "CustomModule";
    }

    private static ReactApplicationContext context;
}

Данный класс содержит обязательный метод getName(). Именно по тому имени, который вернет данный метод можно получить доступ к нативному модулю из кода Javascript (об этом далее).
Обратим также внимание на то, что конструктор класса принимает контекст приложения в качестве аргумента. Контекст приложения необходим, когда мы хотим взаимодействуем с компонентами Android.

Создадим метод класса CustomModule, который будет вызываться из кода Javascript:

@ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(context,"Hello world", Toast.LENGTH_LONG).show();
    }

Заметим, что для того, чтобы метод был доступен в RN, необходимо использовать декоратор “@ReactMethod”.

Класс Toast — компонент Android, который может вызывать всплывающее сообщение снизу с помощью метода show().

Связь модуля с приложением Android

После того, как был создан модуль, его необходимо поместить в пакет (“package”).

Создадим пакет в том же пространстве имен:

package com.awesomeproject;

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 CustomPackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new CustomModule(reactContext));
        return modules;
    }

}

Интерфейс “ReactPackage” содержит два обязательных метода: “createNativeModules” и “createViewManagers”. View manager в коде RN — это компонент. Наш модуль будет использовать функции и не является ui компонентом Android и поэтому помещен в метод “createNativeModules”.

Примечание: один пакет может содержать несколько модулей.

Дальше, пакет необходимо связать с приложением Android следующим образом:

    //MainApplication.java

@Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new CustomPackage());
      return packages;
    }

Использование модуля в коде Javascript

Теперь попробуем вызвать метод “show()” в приложении RN:

const App = () => {
  NativeModules.ToastExample.show();
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Text>text</Text>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

Результат:

Обмен данными между приложениями RN и Android

Теперь, осуществим обмен данными между приложениями. Создадим в классе CustomModule два новых метода, для нахождения суммы:

      @ReactMethod
    public void sum(int a, int b, Promise res) {
        try {
            res.resolve(a+b);
        } catch (IllegalViewOperationException e) {
            res.resolve(e);
        }
    }

@ReactMethod
    public void sum(float a, float b, Callback success, Callback fail) {
        try {
            success.invoke((a+b));
        } catch (IllegalViewOperationException e) {
            fail.invoke(e.getMessage());
        }
    }

Переменные “a” и “b” будут приходить из кода Javascript и необходимо помнить про соответствие типов данных между Java и JS:



Примечание: так как типу Number соответствует сразу несколько типов из Java мы используем перегрузку, создав два метода с одним названием, но разными типами параметров.

Чтобы вернуть данные в код JS модуль com.facebook.react.bridge содержит типы Promise и CallBack.

Теперь используем метод в Js:

const showRes = async () => {
const res = NativeModules.SendDataToRN.sum(400, 250);
   alert(res);
};

const App = () => {
   React.useEffect(() => {
	showRes();
   }, [])

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Text>text</Text>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

Результат:

Заключение

Материалы статьи можно использовать во всех ситуациях, когда api для rn еще не написано. Как видно из примеров, обмен данными между приложениями — достаточно простая операция, не требующая глубоких знаний программирования на Java.