From 5dc21336677ecc3cd777e77053ae274151c58bf1 Mon Sep 17 00:00:00 2001 From: wangxiaokou Date: Thu, 17 Sep 2026 19:21:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20webview=E5=BC=80=E6=94=BE=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E5=AF=BC=E8=88=AA=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../platform/patch/getDefaultOptions.ios.js | 5 +++ .../runtime/components/react/mpx-web-view.tsx | 36 +++++++++++++++---- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js index 5d703cef37..40d189938f 100644 --- a/packages/core/src/platform/patch/getDefaultOptions.ios.js +++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js @@ -538,6 +538,11 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) { error('Using pageWrapper requires passing navigation and route') return null } + navigation.setWebViewShowNav = (showNav) => { + navigation.setPageConfig({ + navigationStyle: showNav === undefined ? currentPageConfig.navigationStyle : (showNav ? undefined : 'custom') + }) + } const headerHeight = useInnerHeaderHeight(currentPageConfig) navigation.layout = getLayoutData(headerHeight) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index ff86251681..c1e68b06f1 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -1,10 +1,10 @@ -import { forwardRef, useRef, useContext, useMemo, useState } from 'react' +import { forwardRef, useRef, useContext, useMemo, useState, useLayoutEffect } from 'react' import { warn, isFunction } from '@mpxjs/utils' import Portal from './mpx-portal/index' import { usePreventRemove, PreventRemoveEvent } from '@react-navigation/native' import { getCustomEvent } from './getInnerListeners' import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy' -import { WebView } from 'react-native-webview' +import { WebView as NativeWebView, WebViewProps as NativeWebViewProps } from 'react-native-webview' import useNodesRef, { HandlerRef } from './useNodesRef' import { getCurrentPage, useNavigation } from './utils' import { WebViewHttpErrorEvent, WebViewEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent } from 'react-native-webview/lib/WebViewTypes' @@ -25,11 +25,15 @@ type CommonCallbackEvent = { interface WebViewProps { src?: string + 'show-navigation-bar'?: boolean bindmessage?: (event: OnMessageCallbackEvent) => void bindload?: (event: CommonCallbackEvent) => void binderror?: (event: CommonCallbackEvent) => void [x: string]: any } +type WebViewInstance = NativeWebView +// 固定组件的 props 类型，兼容不同版本的泛型默认值，JSX 中保持普通标签写法。 +const WebView: new (props: NativeWebViewProps) => WebViewInstance = NativeWebView type Listener = (type: string, callback: (e: Event) => void) => () => void interface PayloadData { @@ -77,8 +81,8 @@ const styles = StyleSheet.create({ } }) -const _WebView = forwardRef, WebViewProps>((props, ref): JSX.Element | null => { - const { src, bindmessage, bindload, binderror } = props +const _WebView = forwardRef, WebViewProps>((props, ref): JSX.Element | null => { + const { src, 'show-navigation-bar': showNavigationBar, bindmessage, bindload, binderror } = props const mpx = global.__mpx const errorText: ErrorTextMap = { 'zh-CN': { @@ -97,8 +101,9 @@ const _WebView = forwardRef, WebViewProps>((pr } const { pageId } = useContext(RouteContext) || {} const [pageLoadErr, setPageLoadErr] = useState(false) + const [showNav, setShowNav] = useState(showNavigationBar) const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]) - const webViewRef = useRef(null) + const webViewRef = useRef(null) const fristLoaded = useRef(false) const isLoadError = useRef(false) const isNavigateBack = useRef(false) @@ -123,7 +128,7 @@ const _WebView = forwardRef, WebViewProps>((pr isNavigateBack.current = false }) - useNodesRef(props, ref, webViewRef, { + useNodesRef(props, ref, webViewRef, { style: defaultWebViewStyle }) @@ -147,6 +152,20 @@ const _WebView = forwardRef, WebViewProps>((pr } } + useLayoutEffect(() => { + setShowNav(showNavigationBar) + }, [showNavigationBar]) + + useLayoutEffect(() => { + // 属性和 H5 均未指定显隐时，沿用页面导航配置。 + if (showNav === undefined) return + const applyShowNav = navigation?.setWebViewShowNav + if (!applyShowNav) return + applyShowNav(showNav) + // 卸载或显隐变化时清除旧覆盖，恢复页面配置。 + return () => applyShowNav(undefined) + }, [navigation, showNav]) + if (!src) { return null } @@ -225,6 +244,11 @@ const _WebView = forwardRef, WebViewProps>((pr const params = Array.isArray(args) ? args : [postData] const type = data.type switch (type) { + case 'hideNavigationBar': + case 'showNavigationBar': + setShowNav(type === 'showNavigationBar') + asyncCallback = Promise.resolve({ errMsg: `${type}:ok` }) + break case 'setTitle': { // case下不允许直接声明，包个块解决该问题 const title = postData._documentTitle?.trim() From 6dc7529d5b959abc3db65cec5ff522a858b5edae Mon Sep 17 00:00:00 2001 From: wangxiaokou Date: Mon, 21 Sep 2026 21:02:46 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E5=90=8E=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../platform/patch/getDefaultOptions.ios.js | 4 +--- .../runtime/components/react/mpx-web-view.tsx | 20 +++++++++---------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js index 40d189938f..9c996851d3 100644 --- a/packages/core/src/platform/patch/getDefaultOptions.ios.js +++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js @@ -539,9 +539,7 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) { return null } navigation.setWebViewShowNav = (showNav) => { - navigation.setPageConfig({ - navigationStyle: showNav === undefined ? currentPageConfig.navigationStyle : (showNav ? undefined : 'custom') - }) + navigation.setPageConfig({ navigationStyle: showNav ? undefined : 'custom' }) } const headerHeight = useInnerHeaderHeight(currentPageConfig) navigation.layout = getLayoutData(headerHeight) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index c1e68b06f1..c77a4e5513 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -101,7 +101,7 @@ const _WebView = forwardRef, WebViewPr } const { pageId } = useContext(RouteContext) || {} const [pageLoadErr, setPageLoadErr] = useState(false) - const [showNav, setShowNav] = useState(showNavigationBar) + const showNavRef = useRef() const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]) const webViewRef = useRef(null) const fristLoaded = useRef(false) @@ -152,19 +152,17 @@ const _WebView = forwardRef, WebViewPr } } - useLayoutEffect(() => { - setShowNav(showNavigationBar) - }, [showNavigationBar]) - - useLayoutEffect(() => { - // 属性和 H5 均未指定显隐时，沿用页面导航配置。 - if (showNav === undefined) return + const setShowNav = (showNav: boolean | undefined) => { + if (showNav === undefined || showNavRef.current === showNav) return const applyShowNav = navigation?.setWebViewShowNav if (!applyShowNav) return applyShowNav(showNav) - // 卸载或显隐变化时清除旧覆盖，恢复页面配置。 - return () => applyShowNav(undefined) - }, [navigation, showNav]) + showNavRef.current = showNav + } + + useLayoutEffect(() => { + setShowNav(showNavigationBar) + }, [showNavigationBar]) if (!src) { return null