На этой неделе я научился вызывать методы Java из JavaScript.

За последние две недели мы с коллегами занимались многими проблемами React Native.

Большинство из них было легко исправить, но есть один, который выделялся. Приложение работает на IOS без каких-либо проблем, но происходит сбой на эмуляторе Android.

Таким образом, подозрение заставляет нас поверить, что проблема лежит в нативном уровне (в данном случае, в коде Java, который помогает нам выполнять JavaScript на Android).

После посещения документации React Native появилась приведенная ниже цитата.

Если вам нужно оптимизировать несколько аспектов вашего приложения, легко перейти к нативному коду.

Так что я сделал перерыв в тревожной проблеме и изучил эту сторону нативного React. Все оказалось так просто, как говорят.

Единственное, что мне понравилось, это то, что вы можете добавить собственный код непосредственно в сгенерированное приложение, как описано ниже.

Предпосылки

Шаги ниже предполагают, что

  • У вас установлена ​​последняя версия Nodejs LTS
  • У вас установлена ​​и настроена Android studio
  • Вы можете запустить эмулятор Android
  • Вы знакомы с React Native.
  • Вы немного знаете Java

Приложение

Мы собираемся создать приложение, которое предоставляет информацию об использовании памяти.

Создайте новое реактивное приложение

npx react-native-cli init MemoryDebugger

Замените содержимое App.js указанным ниже.

Запустите его на эмуляторе Android, чтобы убедиться, что вы видите сообщение НЕ РАЗРЕШЕНО ПАМЯТИ ИНТЕНСИВНО.

Создайте и зарегистрируйте нативный пакет реакции

  • Внутри android/app/src/main/java/com/memorydebugger добавьте новый файл с именем MDebuggerPackage.java
  • Внутри этого вновь созданного файла добавьте содержимое ниже (Обратите внимание на вызов MDebuggerModule , мы создадим его далее)
  • Добавить экземпляр MDebuggerPackage в список зарегистрированных пакетов

Создайте и зарегистрируйте нативный модуль реакции

  • Внутри android/app/src/main/java/com/memorydebugger добавьте новый файл с именем MDebuggerModule.java
  • Внутри этого вновь созданного файла добавьте содержимое ниже.
  • Добавить экземпляр MDebuggerModule в список модулей под MDebuggerPackage.java

Добавление и предоставление методов Java (уже предоставлено во фрагменте кода MDebuggerModule.java code)

  • Вы предоставляете метод Java с помощью декоратора @ReactMethod

Вызов открытых методов из JavaScript

  • Добавьте фрагмент ниже в файл App.js

Очистите проект и перезапустите приложение для Android

  • cd android
  • ./gradlew clean
  • cd ../
  • npx react-native run-android

Заключение

Здорово! теперь вы знаете, как вызывать методы класса Java из JavaScript в React Native.

В будущем мы будем использовать код из этой записи, чтобы отслеживать нашу проблему, описанную в начале.

Также имеет смысл изучить сторону IOS для вызова родного кода swift/Objective-C из JavaScript.

Ресурс