Nâng CaoReact Native iconReact Native

Viết Native Module Android (Kotlin) — hello world step-by-step?

Bước 1 — Spec TypeScript (src/specs/NativeCalculator.ts):

ts
import { TurboModule, TurboModuleRegistry } from 'react-native'

export interface Spec extends TurboModule {
  add(a: number, b: number): number
  fetchUser(id: string): Promise<{ name: string }>
}

export default TurboModuleRegistry.getEnforcing<Spec>('Calculator')

Bước 2 — package.json:

json
"codegenConfig": { "name": "RNCalculatorSpec", "type": "modules", "jsSrcsDir": "src/specs" }

Bước 3 — Implementation Kotlin (android/src/main/java/com/calculator/CalculatorModule.kt):

kotlin
package com.calculator

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.Promise
import com.calculator.NativeCalculatorSpec // generated by Codegen

class CalculatorModule(reactContext: ReactApplicationContext) :
  NativeCalculatorSpec(reactContext) {

  override fun getName() = NAME

  override fun add(a: Double, b: Double): Double = a + b

  override fun fetchUser(id: String, promise: Promise) {
    // gọi API, DB, etc.
    promise.resolve(mapOf("name" to "Alice"))
  }

  companion object { const val NAME = "Calculator" }
}

Bước 4 — Package register (CalculatorPackage.kt):

kotlin
class CalculatorPackage : TurboReactPackage() {
  override fun getModule(name: String, ctx: ReactApplicationContext) =
    if (name == CalculatorModule.NAME) CalculatorModule(ctx) else null
  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
    mapOf(CalculatorModule.NAME to ReactModuleInfo(
      CalculatorModule.NAME, CalculatorModule::class.java.name,
      false, false, false, false, true))
  }
}

Bước 5 — Add to MainApplication:

kotlin
override fun getPackages(): List<ReactPackage> = PackageList(this).packages.apply {
  add(CalculatorPackage())
}

Bước 6 — Sử dụng:

ts
import Calculator from './src/specs/NativeCalculator'
console.log(Calculator.add(2, 3)) // 5 (sync)
console.log(await Calculator.fetchUser('42')) // { name: "Alice" }

Build: pnpm android → Gradle chạy Codegen → biên dịch.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native