react native 0.83 turbo modules 安卓 使用记录
结论
总的来说能用,但是官方文档不是很全,基本靠猜
生成步骤
定义接口
在specs目录下创建一个接口定义
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中增加
"codegenConfig": {
"name": "NativeAlertSpec",
"type": "modules",
"jsSrcsDir": "./specs",
"android": {
"javaPackageName": "com.nativealert"
}
}生成一些模板代码
cd android && ./gradlew generateCodegenArtifactsFromSchema建立安卓代码目录
这个目录要和配置中的javaPackageName对应: android/app/src/main/java/com/nativealert
完成模块逻辑
java的文件名和类名一致即可
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()
}
}完成注册代码
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())默认是有注释的,要放开
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)
}
}页面中调用
import NativeAlert from '../../specs/NativeAlert';
NativeAlert.showAlert("测试", "内容")