HarmonyOS 鸿蒙Next 跨页面使用NodeContainer全局复用组件 页面1的NodeContainer组件在从页面2返回时不显示
用单例定义了一个全局复用组件,在页面1和页面2都用NodeContainer显示该动态组件,从页面1跳到页面2,再从页面2返回到页面1,此时页面1没有显示出该组件
页面1的代码:
import { TestBuild } from '../TestBuild';
import { router } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
pageStack: NavPathStack = new NavPathStack()
private context = getContext(this) as common.UIAbilityContext;
aboutToAppear(): void {
}
build() {
Column() {
Row() {
Button('页面二').onClick((eventr: ClickEvent) => {
router.pushUrl({ url: 'pages/SecondIndex' })
}).margin({ right: 5 })
Button('页面三').onClick((eventr: ClickEvent) => {
router.pushUrl({ url: 'pages/ThirdIndex' })
})
NodeContainer(TestBuild.getNodeController())
.width('100%')
.height('80%')
}
}
}
}
页面2的代码:
import { TestBuild } from '../TestBuild'
@Entry
@Component
struct SecondIndex {
@State message: string = 'Hello World';
build() {
Column() {
RelativeContainer() {
NodeContainer(TestBuild.getNodeController())
.width('100%')
.height('100%')
}
.height('100%')
.width('100%')
}
}
}
全局复用组件的代码:
import { BuilderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI'
import { webview } from '@kit.ArkWeb';
let mycontroller: webview.WebviewController = new webview.WebviewController();
@Builder
function webNode() {
Column() {
Web({
src: 'https://www.baidu.com',
// src: $rawfile('testHtml.html'),
controller: mycontroller
}).domStorageAccess(true)
.javaScriptAccess(true)
.height('100%')
.width('100%')
.margin({ bottom: 20 })
.onErrorReceive((event) => {
if (event?.request.isMainFrame()) {
}
})
}
}
export class TestNodeController extends NodeController {
makeNode(uiContext: UIContext): FrameNode | null {
return TestBuild.getWebNode(uiContext)
}
}
export class TestBuild {
static node: BuilderNode<ESObject> | null = null
static testNodeController : TestNodeController = new TestNodeController();
static getWebNode(uiContext: UIContext): FrameNode | null {
if (!TestBuild.node) {
TestBuild.node = new BuilderNode(uiContext)
TestBuild.node.build(wrapBuilder(webNode))
}else {
TestBuild.node.update(null)
}
return TestBuild.node.getFrameNode()
}
static getNodeController():TestNodeController{
return TestBuild.testNodeController
}
}
更多关于HarmonyOS 鸿蒙Next 跨页面使用NodeContainer全局复用组件 页面1的NodeContainer组件在从页面2返回时不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
看你的代码是建了一个NodeController单例,这个估计是不支持单例造成的,试过直接
new TestNodeController() 是没问题的
更多关于HarmonyOS 鸿蒙Next 跨页面使用NodeContainer全局复用组件 页面1的NodeContainer组件在从页面2返回时不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,跨页面使用NodeContainer全局复用组件时,若页面1的NodeContainer组件在从页面2返回时不显示,通常是由于页面栈管理或组件状态未正确恢复导致的。
可能的原因包括:
-
页面生命周期:页面2返回页面1时,页面1的
onResume
或相关生命周期方法可能未正确触发,导致NodeContainer未能重新渲染。 -
组件状态丢失:跨页面传递组件状态时,可能因为状态管理不当(如未使用全局状态管理或状态未正确保存和恢复),导致NodeContainer组件状态丢失。
-
渲染逻辑错误:页面1的渲染逻辑可能存在错误,导致在特定条件下(如从页面2返回时)NodeContainer不被渲染。
解决方法:
- 确认页面1的
onResume
等生命周期方法被正确调用,并在其中检查NodeContainer的渲染逻辑。 - 使用全局状态管理(如DataAbility或分布式数据)来确保跨页面传递的状态不会丢失。
- 检查并修正页面1的渲染逻辑,确保在所有情况下NodeContainer都能被正确渲染。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html