Урок 11

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

Когда Expo и React Native не покрывают задачу — пишут нативный модуль.

Когда нужен нативный модуль

  • Обращение к специфичному API устройства
  • Сторонняя нативная библиотека без RN-обёртки
  • Высокопроизводительные вычисления
  • SDK платёжных систем, банков

Expo Modules API

Современный способ:

npx create-expo-module --local

Создаёт структуру:

modules/
└── my-module/
    ├── ios/
    │   └── MyModule.swift
    ├── android/
    │   └── MyModule.kt
    ├── src/
    │   └── MyModule.ts
    └── expo-module.config.json

iOS (Swift)

import ExpoModulesCore

public class MyModule: Module {
    public func definition() -> ModuleDefinition {
        Name("MyModule")

        Function("greet") { (name: String) -> String in
            return "Привет, \(name)"
        }
    }
}

Android (Kotlin)

package expo.modules.mymodule

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class MyModule : Module() {
    override fun definition() = ModuleDefinition {
        Name("MyModule")

        Function("greet") { name: String ->
            "Привет, $name"
        }
    }
}

Использование в JS

import MyModule from '../modules/my-module';

const greeting = MyModule.greet('Алиса');

Готовые библиотеки

Проверь, нет ли уже готового решения:

  • react-native-* — тысячи модулей
  • expo-* — официальные
  • @react-native-community/* — community

Каталог: reactnative.directory

Config Plugin

Если библиотека требует настройки нативного проекта — Config Plugin автоматизирует:

// app.plugin.js
const { withAndroidManifest } = require('@expo/config-plugins');

module.exports = function myPlugin(config) {
    return withAndroidManifest(config, (config) => {
        config.modResults.manifest.application[0].$['android:usesCleartextTraffic'] = 'false';
        return config;
    });
};

В app.json:

{
    "expo": {
        "plugins": ["./app.plugin.js"]
    }
}

Dev Client

Если используешь нативный модуль — Expo Go не подойдёт:

eas build --profile development --platform ios

Собирается dev client с твоими модулями.

Публикация модуля

Если модуль полезен другим — публикуй на npm:

npm publish

Структура:

my-module/
├── ios/
├── android/
├── src/
├── index.ts
├── package.json
└── README.md

Обновление нативных модулей

При смене нативного кода нужна новая сборка. OTA не поможет.

Итоги

  • Нативный модуль — когда нет готового
  • Expo Modules API для своих
  • Swift + Kotlin
  • Проверь существующие библиотеки
  • Config Plugin для настройки
  • Dev client для нативных модулей
  • Публикация на npm