结论

总的来说能用,但是官方文档不是很全,基本靠猜

生成步骤

定义接口

在specs目录下创建一个接口定义

1
2
3
4
5
6
7
8
9
10
import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
import { TurboModuleRegistry } from 'react-native';

// 定义模块的接口
export interface Spec extends TurboModule {
    // 显示简单弹窗
    showAlert(title: string, message: string): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeAlert');

添加配置

在packege.json中增加

1
2
3
4
5
6
7
8
"codegenConfig": {
  "name": "NativeAlertSpec",
  "type": "modules",
  "jsSrcsDir": "./specs",
  "android": {
    "javaPackageName": "com.nativealert"
  }
}

生成一些模板代码

1
cd android && ./gradlew generateCodegenArtifactsFromSchema

建立安卓代码目录

这个目录要和配置中的javaPackageName对应: android/app/src/main/java/com/nativealert

完成模块逻辑

java的文件名和类名一致即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package com.nativealert

import android.app.AlertDialog
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactMethod
import com.facebook.proguard.annotations.DoNotStrip
import com.nativealert.NativeAlertSpec
import javax.annotation.Nonnull

class NativeAlertModule(reactContext: ReactApplicationContext) : NativeAlertSpec(reactContext) {
   
    companion object {
        const val NAME = "NativeAlert"
    }

    override fun getName(): String {
        return NAME
    }

    @ReactMethod
    @DoNotStrip
    override fun showAlert(title: String?, message: String?) {
        val currentActivity = reactApplicationContext.currentActivity ?: return

        AlertDialog.Builder(currentActivity)
            .setTitle(title)
            .setMessage(message)
            .setPositiveButton("OK") { dialog, _ ->
                dialog.dismiss()
            }
            .show()
    }
}

完成注册代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.nativealert

import com.facebook.react.BaseReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.module.model.ReactModuleInfo
import com.facebook.react.module.model.ReactModuleInfoProvider
import com.nativealert.NativeAlertModule

class NativeAlertPackage : BaseReactPackage() {

    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? =
        if (name == NativeAlertModule.NAME) {
            NativeAlertModule(reactContext)
        } else {
            null
        }

    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider {
        mapOf(
            NativeAlertModule.NAME to ReactModuleInfo(
                name = NativeAlertModule.NAME,
                className = NativeAlertModule::class.java.name,
                canOverrideExistingModule = false,
                needsEagerInit = true,
                isCxxModule = false,
                isTurboModule = true
            )
        )
    }
}

在MainApplication.kt中注册

这里的add(NativeAlertPackage())默认是有注释的,要放开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package com.iguojin.tlp

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.nativealert.NativeAlertPackage

class MainApplication : Application(), ReactApplication {

  override val reactHost: ReactHost by lazy {
    getDefaultReactHost(
      context = applicationContext,
      packageList =
        PackageList(this).packages.apply {
          // Packages that cannot be autolinked yet can be added manually here, for example:
          add(NativeAlertPackage())
        },
    )
  }

  override fun onCreate() {
    super.onCreate()
    loadReactNative(this)
  }
}

页面中调用

1
2
3
import NativeAlert from '../../specs/NativeAlert';

NativeAlert.showAlert("测试", "内容")