From 3cda03cd15c6ffc8ac3049d9f1cfb17cf63d8089 Mon Sep 17 00:00:00 2001 From: bo5655 <1332343281@qq.com> Date: Fri, 21 Feb 2025 11:41:13 +0800 Subject: [PATCH 1/3] fix: RN Page Continues Rendering When Navigating to Native Page Signed-off-by: bo5655 <1332343281@qq.com> --- .../src/main/ets/RNSurface.ets | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets index 80a1bfa2..c8b2d068 100644 --- a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets +++ b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets @@ -27,6 +27,7 @@ import { SurfaceHandle, SurfaceProps } from './RNOH/SurfaceHandle'; import { I18nManagerTurboModule } from './RNOHCorePackage/turboModules'; import type { SurfaceContext } from './RNOH/RNInstance'; import { NodeContent } from '@ohos.arkui.node' +import { uiObserver as observer } from '@kit.ArkUI'; interface RootViewState {} @@ -120,9 +121,43 @@ export struct RNSurface { * onWindowSizeChange delay, as both have an effect on window changes. */ private readonly delayTime: number = 100; + private isOnNavDestinationSwitch: boolean = false; + private navgationInfo: NavigationInfo | undefined; + private navDestinationInfo: NavDestinationInfo | undefined; + + onNavDestinationSwitch(): void { + if (!this.isOnNavDestinationSwitch) { + return; + } + this.navgationInfo = this.queryNavigationInfo(); + this.navDestinationInfo = this.queryNavDestinationInfo(); + if (this.navgationInfo == undefined) { + return; + } + const callBackNavDestinationSwitchInfo = (info: observer.NavDestinationSwitchInfo) => { + const navDestinationInfoFrom = (info.from) as NavDestinationInfo; + const navDestinationInfoTo = (info.to) as NavDestinationInfo; + // navigation to navDestination + if (navDestinationInfoFrom.state == undefined + && (this.navDestinationInfo == undefined || + this.navDestinationInfo.state == observer.NavDestinationState.ON_HIDDEN)) { + this.surfaceHandle.setDisplayMode(DisplayMode.Hidden); + return; + } + // navDestination to navDestination + if (navDestinationInfoFrom.state == observer.NavDestinationState.ON_HIDDEN + && navDestinationInfoFrom == this.navDestinationInfo) { + this.surfaceHandle.setDisplayMode(DisplayMode.Hidden); + } + return; + } + this.isOnNavDestinationSwitch = true; + observer.on('navDestinationSwitch', this.getUIContext(), callBackNavDestinationSwitchInfo); + } aboutToAppear() { this.logger = this.ctx.logger.clone("RNSurface") + this.onNavDestinationSwitch() if (!(this.ctx instanceof RNComponentContext)) { this.ctx.reportRNOHError(new RNOHError({ whatHappened: "RNSurface received RNOHContext instead of RNComponentContext. Custom RN components won't be visible.", @@ -166,6 +201,7 @@ export struct RNSurface { aboutToDisappear() { const surfaceHandle = this.surfaceHandle; + observer.off('navDestinationSwitch', this.getUIContext(), null); if (this.timerId) { clearTimeout(this.timerId); this.timerId = undefined; -- Gitee From 81d796cced6d676e70a47e76810bc935f7c50126 Mon Sep 17 00:00:00 2001 From: bo5655 <1332343281@qq.com> Date: Fri, 21 Feb 2025 14:09:22 +0800 Subject: [PATCH 2/3] fix: RN Page Continues Rendering When Navigating to Native Page Signed-off-by: bo5655 <1332343281@qq.com> --- .../src/main/ets/RNSurface.ets | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets index c8b2d068..5536d8be 100644 --- a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets +++ b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets @@ -138,21 +138,20 @@ export struct RNSurface { const navDestinationInfoFrom = (info.from) as NavDestinationInfo; const navDestinationInfoTo = (info.to) as NavDestinationInfo; // navigation to navDestination - if (navDestinationInfoFrom.state == undefined - && (this.navDestinationInfo == undefined || - this.navDestinationInfo.state == observer.NavDestinationState.ON_HIDDEN)) { + if (navDestinationInfoFrom.state == undefined && this.navDestinationInfo == undefined) { this.surfaceHandle.setDisplayMode(DisplayMode.Hidden); return; } // navDestination to navDestination if (navDestinationInfoFrom.state == observer.NavDestinationState.ON_HIDDEN - && navDestinationInfoFrom == this.navDestinationInfo) { + && navDestinationInfoFrom.name == this.navDestinationInfo?.name) { this.surfaceHandle.setDisplayMode(DisplayMode.Hidden); } return; } this.isOnNavDestinationSwitch = true; - observer.on('navDestinationSwitch', this.getUIContext(), callBackNavDestinationSwitchInfo); + observer.on('navDestinationSwitch', this.getUIContext(), {navigationId: this.navgationInfo.navigationId}, + callBackNavDestinationSwitchInfo); } aboutToAppear() { @@ -201,7 +200,9 @@ export struct RNSurface { aboutToDisappear() { const surfaceHandle = this.surfaceHandle; - observer.off('navDestinationSwitch', this.getUIContext(), null); + if (this.isOnNavDestinationSwitch) { + observer.off('navDestinationSwitch', this.getUIContext(), {navigationId: this.navgationInfo?.navigationId}, null); + } if (this.timerId) { clearTimeout(this.timerId); this.timerId = undefined; -- Gitee From 321ee2c22d17aee37dbb1c244489d91697a999e3 Mon Sep 17 00:00:00 2001 From: bo5655 <1332343281@qq.com> Date: Fri, 21 Feb 2025 17:22:11 +0800 Subject: [PATCH 3/3] fix: RN Page Continues Rendering When Navigating to Native Page Signed-off-by: bo5655 <1332343281@qq.com> --- .../harmony/react_native_openharmony/src/main/ets/RNSurface.ets | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets index 5536d8be..6549114f 100644 --- a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets +++ b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets @@ -126,7 +126,7 @@ export struct RNSurface { private navDestinationInfo: NavDestinationInfo | undefined; onNavDestinationSwitch(): void { - if (!this.isOnNavDestinationSwitch) { + if (this.isOnNavDestinationSwitch) { return; } this.navgationInfo = this.queryNavigationInfo(); -- Gitee