diff --git a/.agents/skills/mpx2rn/references/rn-script-reference.md b/.agents/skills/mpx2rn/references/rn-script-reference.md index 025a6e4384..53a157e3f2 100644 --- a/.agents/skills/mpx2rn/references/rn-script-reference.md +++ b/.agents/skills/mpx2rn/references/rn-script-reference.md @@ -702,6 +702,7 @@ Mpx.config.rnConfig = { onStateChange(state) { console.log("navigation state", state) }, + disablePageTransition: true, openTypeHandler: { onShareAppMessage(shareInfo) { console.log("share", shareInfo) @@ -718,6 +719,7 @@ Mpx.config.rnConfig = { | `projectName` | 由构建注入到 RN 入口，与 `AppRegistry.registerComponent` 相关（偏构建侧）。 | | `parseAppProps` | `(props) => { initialRouteName?, initialParams? }`，解析外层传入 App 根组件的初始路由。 | | `onStateChange` | 导航 state 变化时回调。 | +| `disablePageTransition` | 为 `true` 时禁用 RN 页面转场动画，框架内部映射为 `animation: "none"`。 | | `disableAppStateListener` | 为 `true` 时不注册 `AppState` 监听（避免与宿主 App 重复）。 | | `openTypeHandler` | 对象，注册 `button` 组件在 RN 上 `open-type` 的容器侧实现，未注册对应键时点击会告警。 | | `openTypeHandler.onShareAppMessage` | 对应模板中 `open-type="share"`：框架会先取当前页 `onShareAppMessage` 的返回（含与默认 `title` / `path` 的合并及可选 `promise` 异步结果），再调用本回调，入参为 `{ title, path, imageUrl? }`，由宿主调起系统分享等能力。 | diff --git a/docs-vitepress/guide/rn/application-api.md b/docs-vitepress/guide/rn/application-api.md index ba225bbfa8..d22f1e5121 100644 --- a/docs-vitepress/guide/rn/application-api.md +++ b/docs-vitepress/guide/rn/application-api.md @@ -428,6 +428,20 @@ createComponent({ 在需要将 RN 应用嵌入到现有的 NA 应用中时，可能需要将 RN 的路由栈同步到 NA 中以便于进行路径关系，此时可在此回调中将 RN 路径栈同步到容器中。 +#### mpx.config.rnConfig.disablePageTransition + +```ts +boolean +``` + +用于禁用页面转场动画，默认为 `false`。设置为 `true` 后，框架会在内部导航配置中使用 `animation: 'none'`。 + +如果需要关闭转场动画，可配置： + +```js +mpx.config.rnConfig.disablePageTransition = true +``` + #### mpx.config.rnConfig.onAppBack ```ts diff --git a/packages/core/@types/index.d.ts b/packages/core/@types/index.d.ts index 41c6840928..aa83ee6a5d 100644 --- a/packages/core/@types/index.d.ts +++ b/packages/core/@types/index.d.ts @@ -294,6 +294,13 @@ export interface RnConfig { */ onStateChange?: (state: Record) => void + /** + * 是否禁用页面转场动画。 + * + * @default false + */ + disablePageTransition?: boolean + /** * 用于获取初始路由配置的函数。 * @@ -320,6 +327,13 @@ export interface RnConfig { */ disableAppStateListener?: boolean + /** + * RN 导航状态栏是否默认透明。 + * + * @default true + */ + statusBarTranslucent?: boolean + /** * RN 文本类组件是否允许跟随系统字体缩放。 * diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 7be9ec943b..cae6a413d1 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -155,7 +155,8 @@ Mpx.config = { * react-native 相关配置，用于挂载事件等，如 onShareAppMessage */ rnConfig: { - defaultBoxSizing: 'content-box' + defaultBoxSizing: 'content-box', + disablePageTransition: false } } diff --git a/packages/core/src/platform/createApp.ios.js b/packages/core/src/platform/createApp.ios.js index b6cc29f464..a51a87a4c5 100644 --- a/packages/core/src/platform/createApp.ios.js +++ b/packages/core/src/platform/createApp.ios.js @@ -133,7 +133,7 @@ export default function createApp (options) { cb(options) }) } else if (value === 'hide' || value === 'exit') { - global.__mpxAppCbs.hide.forEach((cb) => { + global.__mpxAppCbs.hide.forEach((cb) => { cb({ reason: value === 'exit' ? 0 : 3 }) @@ -216,6 +216,9 @@ export default function createApp (options) { statusBarTranslucent: Mpx.config.rnConfig.statusBarTranslucent ?? true, statusBarBackgroundColor: 'transparent' } + if (Mpx.config.rnConfig.disablePageTransition) { + navScreenOpts.animation = 'none' + } return createElement(SafeAreaProvider, null, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx index a572bb18e9..2d8abd799e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx @@ -33,6 +33,8 @@ import { createImageData as canvasCreateImageData } from './ImageData' import { useConstructorsRegistry } from './constructorsRegistry' import Portal from '../mpx-portal' +type WebViewInstance = WebView + const stylesheet = StyleSheet.create({ container: { overflow: 'hidden', flex: 0 }, webview: { @@ -266,7 +268,7 @@ const _Canvas = forwardRef, CanvasPr canvasComponent = createElement(View, innerProps, createElement( WebView, { - ref: (element) => { + ref: (element: WebViewInstance | null) => { if (canvasRef.current) { canvasRef.current.webview = element } @@ -291,7 +293,7 @@ const _Canvas = forwardRef, CanvasPr } canvasComponent = createElement(View, innerProps, createElement(WebView, { - ref: (element) => { + ref: (element: WebViewInstance | null) => { if (canvasRef.current) { canvasRef.current.webview = element } 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 19028c2e7f..3606994845 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 @@ -35,6 +35,7 @@ interface WebViewProps { binderror?: (event: CommonCallbackEvent) => void [x: string]: any } +type WebViewInstance = WebView type Listener = (type: string, callback: (e: Event) => void) => () => void interface PayloadData { @@ -82,7 +83,7 @@ const styles = StyleSheet.create({ } }) -const _WebView = forwardRef, WebViewProps>((props, ref): JSX.Element | null => { +const _WebView = forwardRef, WebViewProps>((props, ref): JSX.Element | null => { const { src, bindmessage, bindload, binderror } = props const mpx = global.__mpx const errorText: ErrorTextMap = { @@ -103,7 +104,7 @@ const _WebView = forwardRef, WebViewProps>((pr const { pageId } = useContext(RouteContext) || {} const [pageLoadErr, setPageLoadErr] = useState(false) 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) @@ -128,7 +129,7 @@ const _WebView = forwardRef, WebViewProps>((pr isNavigateBack.current = false }) - useNodesRef(props, ref, webViewRef, { + useNodesRef(props, ref, webViewRef, { style: defaultWebViewStyle })