diff --git a/HomeFluency/entry/src/main/ets/RNPackagesFactory.ts b/HomeFluency/entry/src/main/ets/RNPackagesFactory.ts index ea929b743cae51c5399f221e2a6549739b043e82..61d2208d123fcf86b90fcd2f5f029221001186db 100644 --- a/HomeFluency/entry/src/main/ets/RNPackagesFactory.ts +++ b/HomeFluency/entry/src/main/ets/RNPackagesFactory.ts @@ -1,8 +1,7 @@ import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts'; -// import { SamplePackage } from 'rnoh-sample-package/ts'; import { RNCVideoPackage } from '@react-native-oh-tpl/react-native-video/ts'; import { GestureHandlerPackage } from 'rnoh-gesture-handler/ts'; -import {SafeAreaViewPackage} from '@react-native-oh-tpl/react-native-safe-area-context/ts'; +import { SafeAreaViewPackage } from '@react-native-oh-tpl/react-native-safe-area-context/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [new RNCVideoPackage(ctx), new GestureHandlerPackage(ctx), new SafeAreaViewPackage(ctx)]; diff --git a/HomeFluency/entry/src/main/ets/customView/MarqueeView.ets b/HomeFluency/entry/src/main/ets/customView/MarqueeView.ets index d2aebbd3b5ebdece0598d4f72e2fb2545a38833d..7f79e4fefb51ed96e466e45bd9cb881e75bd0c19 100644 --- a/HomeFluency/entry/src/main/ets/customView/MarqueeView.ets +++ b/HomeFluency/entry/src/main/ets/customView/MarqueeView.ets @@ -5,11 +5,11 @@ export interface MarqueeViewProps extends ViewBaseProps { src: string } -export type MarqueeViewDescriptor = Descriptor<"MarqueeView", MarqueeViewProps>; +export type MarqueeViewDescriptor = Descriptor<'MarqueeView', MarqueeViewProps>; @Component export struct MarqueeView { - static NAME: string = "MarqueeView" + static NAME: string = 'MarqueeView' ctx!: RNOHContext tag: number = 0 private unregisterDescriptorChangesListener?: () => void = undefined @@ -18,15 +18,16 @@ export struct MarqueeView { private fromStart: boolean = true private step: number = 15 private loop: number = Number.POSITIVE_INFINITY - @State src: string = "敬请期待" // 和props里的src绑定 + @State src: string = '敬请期待' // 和props里的src绑定 aboutToAppear() { this.start = true this.descriptor = this.ctx.descriptorRegistry.getDescriptor(this.tag) - this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (newDescriptor) => { - this.descriptor = (newDescriptor as MarqueeViewDescriptor) - }) + this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry + .subscribeToDescriptorChanges(this.tag, (newDescriptor) => { + this.descriptor = (newDescriptor as MarqueeViewDescriptor) + }) console.log('MarqueeView rawProps = ', JSON.stringify(this.descriptor.rawProps), this.tag) console.log('MarqueeView props = ', JSON.stringify(this.descriptor.props), this.tag) @@ -34,14 +35,14 @@ export struct MarqueeView { // 监听rn侧的事件消息 this.ctx.componentCommandReceiver.registerCommandCallback(this.tag, (commandName) => { - if (commandName === "toggleMarqueeState") { + if (commandName === 'toggleMarqueeState') { this.start = !this.start - console.log("rn marqueeView called toggleMarqueeState!"); - console.log("toggleMarqueeState : ", this.descriptor.tag) + console.log('rn marqueeView called toggleMarqueeState!'); + console.log('toggleMarqueeState : ', this.descriptor.tag) this.ctx.rnInstance.emitComponentEvent( this.descriptor.tag, - "stop", - { isStop: !this.start, type: "custom" } + 'stop', + { isStop: !this.start, type: 'custom' } ) } }) @@ -67,7 +68,7 @@ export struct MarqueeView { .fontWeight(700) .margin({ left: 10, right: 10 }) .onTouch(() => { // 通过emit方式发送消息给rn侧调用rn的方法 - this.ctx.rnInstance.emitDeviceEvent("clickMarqueeEvent", { params: { age: 18 } }) + this.ctx.rnInstance.emitDeviceEvent('clickMarqueeEvent', { params: { age: 18 } }) }) } .height(180) diff --git a/HomeFluency/entry/src/main/ets/pages/Index.ets b/HomeFluency/entry/src/main/ets/pages/Index.ets index 3bdee4e9ea75978f55646fdeb56dcd38cdea6889..e4cb43ce33501ceeb6e0971fce7824b9f949f381 100644 --- a/HomeFluency/entry/src/main/ets/pages/Index.ets +++ b/HomeFluency/entry/src/main/ets/pages/Index.ets @@ -10,31 +10,18 @@ import { TraceJSBundleProviderDecorator, RNOHCoreContext } from '@rnoh/react-native-openharmony' -// import { SampleView, PropsDisplayer, GeneratedSampleView } from "rnoh-sample-package" +// import { SampleView, PropsDisplayer, GeneratedSampleView } from 'rnoh-sample-package' import font from '@ohos.font'; import { createRNPackages } from '../RNPackagesFactory' -import { RNCVideo, RNC_VIDEO_TYPE } from "@react-native-oh-tpl/react-native-video" +import { RNCVideo, RNC_VIDEO_TYPE } from '@react-native-oh-tpl/react-native-video' import { RNGestureHandlerButton, RNGestureHandlerModule, RNGestureHandlerRootView } from 'rnoh-gesture-handler'; -import { LottieAnimationView, LOTTIE_TYPE } from "@react-native-oh-tpl/lottie-react-native"; +import { LottieAnimationView, LOTTIE_TYPE } from '@react-native-oh-tpl/lottie-react-native'; import { MarqueeView } from '../customView/MarqueeView' @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { - // if (ctx.componentName === GeneratedSampleView.NAME) { - // GeneratedSampleView({ - // ctx: ctx.rnComponentContext, - // tag: ctx.tag, - // }) - // } - // if (ctx.componentName === PropsDisplayer.NAME) { - // PropsDisplayer({ - // ctx: ctx.rnComponentContext, - // tag: ctx.tag - // }) - // } if (ctx.componentName === RNC_VIDEO_TYPE) { RNCVideo({ - ctx: ctx.rnComponentContext, tag: ctx.tag }) @@ -71,16 +58,13 @@ struct Index { private logger!: RNOHLogger aboutToAppear() { - this.logger = this.rnohCoreContext!.logger.clone("Index") - const stopTracing = this.logger.clone("aboutToAppear").startTracing() + this.logger = this.rnohCoreContext!.logger.clone('Index') + const stopTracing = this.logger.clone('aboutToAppear').startTracing() this.shouldShow = true stopTracing() } onBackPress(): boolean | undefined { - // NOTE: this is required since `Ability`'s `onBackPressed` function always - // terminates or puts the app in the background, but we want Ark to ignore it completely - // when handled by RN this.rnohCoreContext!.dispatchBackPress() return true @@ -96,7 +80,7 @@ struct Index { } RNApp({ onSetUp: (rnInstance) => { // 1.x - rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, "RootView") // 1.x + rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, 'RootView') // 1.x rnInstance.getTurboModule(RNGestureHandlerModule.NAME).install() // 1.x }, // 1.x rnInstanceConfig: { @@ -106,18 +90,12 @@ struct Index { enableCAPIArchitecture: true, arkTsComponentNames: [MarqueeView.NAME, RNC_VIDEO_TYPE] }, - initialProps: { "foo": "bar" } as Record, - appKey: "AwesomeProject", + initialProps: { 'foo': 'bar' } as Record, + appKey: 'AwesomeProject', wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder, - // onSetUp: (rnInstance) => { - // rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP") - // }, jsBundleProvider: new TraceJSBundleProviderDecorator( new AnyJSBundleProvider([ new MetroJSBundleProvider(), - // NOTE: to load the bundle from file, place it in - // `/data/app/el2/100/base/com.rnoh.tester/files/bundle.harmony.js` - // on your device. The path mismatch is due to app sandboxing on HarmonyOS new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'), new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'), new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js')