diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts
index 7cb555c1ba09..f6a78bbff36f 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts
@@ -212,11 +212,23 @@ export class NativeApi {
     return options
   }
 
+  // @ts-ignore
+  @(asyncAndRelease)
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setNavigationStyle (options: any): void {}
+
+  // @ts-ignore
+  @(asyncAndRelease)
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setCapsuleState (options: any): void {}
+
   // @ts-ignore
   @(syncAndRelease)
-  setNavigationStyle (options: any): any {
-    return options
-  }
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getCapsuleState (options: any): any {}
 
   // @ts-ignore
   @(syncAndRelease)
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts
index bbeafa50fc8c..2c46904c6a73 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts
@@ -1,7 +1,3 @@
-import Taro from '@tarojs/api'
-
-import native from './NativeApi'
-
 export * from './ad'
 export * from './ai'
 export * from './alipay'
@@ -28,47 +24,3 @@ export * from './swan'
 export * from './ui'
 export * from './worker'
 export * from './wxml'
-
-if (typeof window !== 'undefined') {
-  // @ts-ignore
-  window.currentNavigation = {}
-}
-
-Taro.eventCenter.on('__taroSetNavigationStyle', (style, textStyle, backgroundColor) => {
-  if (typeof window !== 'undefined') {
-    native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor })
-    // @ts-ignore
-    Object.assign(window.currentNavigation, {
-      style,
-      textStyle,
-      backgroundColor,
-    })
-    // @ts-ignore
-    if (typeof window.originCapsuleState !== 'undefined') {
-      // @ts-ignore
-      window.native?.setCapsuleState?.(window.originCapsuleState)
-    }
-  }
-})
-
-Taro.eventCenter.on('__taroEnterFullScreen', () => {
-  native.setNavigationStyle({ style: 'custom', textStyle: 'black', backgroundColor: '#000000' })
-  // @ts-ignore
-  if (typeof window.originCapsuleState === 'undefined') {
-    // @ts-ignore
-    window.originCapsuleState = window.native?.getCapsuleState().visible
-  }
-  // @ts-ignore
-  window.native?.setCapsuleState?.(false)
-})
-
-Taro.eventCenter.on('__taroExitFullScreen', () => {
-  // @ts-ignore
-  const { style, textStyle, backgroundColor } = window.currentNavigation
-  native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor })
-  // @ts-ignore
-  if (typeof window.originCapsuleState !== 'undefined') {
-    // @ts-ignore
-    window.native?.setCapsuleState?.(window.originCapsuleState)
-  }
-})
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts
index 43437e72fc00..228451dafb61 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts
@@ -5,10 +5,13 @@ import {
   getApp,
   getCurrentInstance,
   getCurrentPages,
+  initLaunchOptions,
+  loadNavigationStyle,
   navigateBack,
   navigateTo,
   nextTick,
   redirectTo,
+  registerNavigationStyleHandler,
   reLaunch,
   switchTab,
 } from './index'
@@ -22,6 +25,12 @@ const requirePlugin = () => {
   }
 }
 
+loadNavigationStyle()
+registerNavigationStyleHandler()
+
+// 同步小程序启动时的参数
+Taro.eventCenter.once('__taroRouterLaunch', initLaunchOptions)
+
 const {
   Behavior,
   getEnv,
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts
index 73bd5d1beb0c..ec1bc138d0a9 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts
@@ -1,37 +1,10 @@
 import Taro from '@tarojs/api'
-import { addStyle } from '@tarojs/router/dist/style'
 import { setTitle } from '@tarojs/router/dist/utils/navigate'
 
 import native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
-/**
- * 导航条与Web层叠布局，导航条可见情况下Web页面顶部空出一定高度的留白
- */
-function loadNavigationSytle () {
-  if (typeof window === 'undefined') {
-    return
-  }
-  // @ts-ignore
-  const naviHeight = window.navigationHeight ? window.navigationHeight : 0
-  const css = `
-.taro_router .taro_page.taro_navigation_page {
-  padding-top: ${naviHeight}px;
-}
-
-.taro-tabbar__container .taro_page.taro_navigation_page {
-  max-height: calc(100vh - ${naviHeight}px);
-}
-
-.taro-tabbar__container .taro_page.taro_tabbar_page.taro_navigation_page {
-  max-height: calc(100vh - 50px - ${naviHeight}px);
-}`
-  addStyle(css)
-}
-
-loadNavigationSytle()
-
 /**
  * 显示页面导航条加载图标
  *
@@ -149,3 +122,4 @@ export const setNavigationBarColor: typeof Taro.setNavigationBarColor = (options
  * @null_implementation
  */
 export const hideHomeButton = () => Promise.resolve()
+export { loadNavigationStyle, registerNavigationStyleHandler } from './style-event'
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts
new file mode 100644
index 000000000000..3c2c047b65b7
--- /dev/null
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts
@@ -0,0 +1,77 @@
+import Taro from '@tarojs/api'
+
+import native from '../../NativeApi'
+
+/**
+ * 导航条与Web层叠布局，导航条可见情况下Web页面顶部空出一定高度的留白
+ */
+export function loadNavigationStyle () {
+  if (window === undefined) {
+    return
+  }
+  // @ts-ignore
+  const naviHeight = window.navigationHeight ? window.navigationHeight : 0
+  const css = `
+.taro_router .taro_page.taro_navigation_page {
+  padding-top: ${naviHeight}px;
+}
+
+.taro-tabbar__container .taro_page.taro_navigation_page {
+  max-height: calc(100vh - ${naviHeight}px);
+}
+
+.taro-tabbar__container .taro_page.taro_tabbar_page.taro_navigation_page {
+  max-height: calc(100vh - 50px - ${naviHeight}px);
+}`
+  const style = document.createElement('style')
+  style.innerHTML = css
+  document.getElementsByTagName('head')[0].appendChild(style)
+}
+
+/**
+ * 监听导航栏设置、进入/退出全屏事件，更改导航栏样式以及显示/隐藏胶囊按钮
+ */
+export function registerNavigationStyleHandler () {
+  if (window !== undefined) {
+    // @ts-ignore
+    window.currentNavigation = {}
+  }
+
+  Taro.eventCenter.on('__taroSetNavigationStyle', (style, textStyle, backgroundColor) => {
+    if (window !== undefined) {
+      native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor })
+      // @ts-ignore
+      Object.assign(window.currentNavigation, {
+        style,
+        textStyle,
+        backgroundColor,
+      })
+      // @ts-ignore
+      const { originCapsuleVisible } = window
+      if (originCapsuleVisible !== undefined) {
+        native.setCapsuleState({ visible: originCapsuleVisible })
+      }
+    }
+  })
+
+  Taro.eventCenter.on('__taroEnterFullScreen', () => {
+    native.setNavigationStyle({ style: 'custom', textStyle: 'black', backgroundColor: '#000000' })
+    // @ts-ignore
+    if (window.originCapsuleVisible === undefined) {
+      // @ts-ignore
+      window.originCapsuleVisible = native.getCapsuleState().visible
+    }
+    native.setCapsuleState({ visible: false })
+  })
+
+  Taro.eventCenter.on('__taroExitFullScreen', () => {
+    // @ts-ignore
+    const { style, textStyle, backgroundColor } = window.currentNavigation
+    native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor })
+    // @ts-ignore
+    const { originCapsuleVisible } = window
+    if (originCapsuleVisible !== undefined) {
+      native.setCapsuleState({ visible: originCapsuleVisible })
+    }
+  })
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts b/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts
index 028aa9146b5c..b6ddbf3a5468 100644
--- a/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts
@@ -1,9 +1,6 @@
 import definition from '@tarojs/plugin-platform-harmony-hybrid/dist/definition.json'
 import isMatchWith from 'lodash-es/isMatchWith'
 import setWith from 'lodash-es/setWith'
-import { initLaunchOptions } from 'src/api/apis'
-import native from 'src/api/apis/NativeApi'
-import { invertColor } from 'src/api/apis/utils/colorConvert'
 
 import Taro from './taro'
 
@@ -30,173 +27,3 @@ export function canIUse (scheme = '') {
 }
 
 export default Taro
-
-// 同步小程序启动时的参数
-Taro.eventCenter.once('__taroRouterLaunch', initLaunchOptions)
-
-if (typeof window !== 'undefined') {
-  // @ts-ignore
-  window.currentNavigation = {}
-}
-
-
-// 更新导航栏状态
-Taro.eventCenter.on('__taroSetNavigationStyle', (style, textStyle, backgroundColor) => {
-  if (typeof window !== 'undefined') {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      // 当前处于深色模式，对textStyle和backgroundColor进行反转
-      textStyle = textStyle === 'black' ? 'white' : 'black'
-      backgroundColor = invertColor(backgroundColor)
-    }
-    native.setNavigationStyle({ style, textStyle, backgroundColor })
-    // @ts-ignore
-    Object.assign(window.currentNavigation, {
-      style,
-      textStyle,
-      backgroundColor,
-    })
-    // @ts-ignore
-    if (typeof window.originCapsuleState !== 'undefined') {
-      // @ts-ignore
-      window.native?.setCapsuleState?.(window.originCapsuleState)
-    }
-  }
-})
-
-
-// 进入全屏时隐藏导航栏和胶囊按钮
-Taro.eventCenter.on('__taroEnterFullScreen', () => {
-  native.setNavigationStyle({
-    style: 'custom',
-    textStyle: 'black',
-    backgroundColor: '#000000',
-  })
-  // @ts-ignore
-  if (typeof window.originCapsuleState === 'undefined') {
-    // @ts-ignore
-    window.originCapsuleState = window.native?.getCapsuleState().visible
-  }
-  // @ts-ignore
-  window.native?.setCapsuleState?.(false)
-})
-
-
-// 退出全屏时恢复导航栏和胶囊按钮
-Taro.eventCenter.on('__taroExitFullScreen', () => {
-  // @ts-ignore
-  const { style, textStyle, backgroundColor } = window.currentNavigation
-  native.setNavigationStyle({ style, textStyle, backgroundColor })
-  // @ts-ignore
-  if (typeof window.originCapsuleState !== 'undefined') {
-    // @ts-ignore
-    window.native?.setCapsuleState?.(window.originCapsuleState)
-  }
-})
-
-
-// 根据是否有导航栏设置页面样式
-function loadNavigationSytle () {
-  if (typeof window === 'undefined') {
-    return
-  }
-  // @ts-ignore
-  const naviHeight = window.navigationHeight ? window.navigationHeight : 0
-  const css = `
-.taro_router .taro_page.taro_navigation_page {
-  padding-top: ${naviHeight}px;
-}
-
-.taro-tabbar__container .taro_page.taro_navigation_page {
-  max-height: calc(100vh - ${naviHeight}px);
-}
-
-.taro-tabbar__container .taro_page.taro_tabbar_page.taro_navigation_page {
-  max-height: calc(100vh - 50px - ${naviHeight}px);
-}`
-
-  const style = document.createElement('style')
-  style.innerHTML = css
-  document.getElementsByTagName('head')[0].appendChild(style)
-}
-
-loadNavigationSytle()
-
-
-// 设置位置选择样式
-function loadChooseLocationStyle () {
-  const css = `
-.taro_choose_location {
-  display: flex;
-  position: fixed;
-  top: 100%;
-  z-index: 1;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  transition: ease top 0.3s;
-}
-.taro_choose_location_bar {
-  display: flex;
-  flex: 0 60px;
-  height: 60px;
-  background-color: #ededed;
-  color: #090909;
-  align-items: center;
-}
-.taro_choose_location_back {
-  position: relative;
-  flex: 0 40px;
-  margin-left: 10px;
-  width: 25px;
-  height: 30px;
-}
-.taro_choose_location_back::before {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  border: solid 15px;
-  border-color: transparent #090909 transparent transparent;
-  width: 0;
-  height: 0;
-  content: "";
-}
-.taro_choose_location_back::after {
-  display: block;
-  position: absolute;
-  left: 3px;
-  top: 0;
-  border: solid 15px;
-  border-color: transparent #ededed transparent transparent;
-  width: 0;
-  height: 0;
-  content: "";
-}
-.taro_choose_location_title {
-  flex: 1;
-  padding-left: 30px;
-  line-height: 60px;
-}
-.taro_choose_location_submit {
-  margin-right: 25px;
-  padding: 0;
-  border: none;
-  width: 75px;
-  height: 40px;
-  background-color: #08bf62;
-  line-height: 40px;
-  font-size: 20px;
-  color: #fff;
-}
-.taro_choose_location_frame {
-  flex: 1;
-}
-`
-
-  const style = document.createElement('style')
-  style.innerHTML = css
-  document.getElementsByTagName('head')[0].appendChild(style)
-}
-
-loadChooseLocationStyle()