支持 RN 系统信息 API 联动 customDimensions

.agents/skills/mpx2rn/references/rn-api-reference.md

@@ -143,6 +143,8 @@ mpx.use(apiProxy, {
 
 **依赖（系统信息相关）**：`getSystemInfo`、`getSystemInfoSync`、`getWindowInfo`、`getDeviceInfo` 在 RN 上依赖设备信息、屏幕与安全区、当前页面导航上下文等能力；请按 **`@mpxjs/api-proxy`** 包说明安装所需的可选原生依赖，否则可能出现取值异常或运行时报错。
 
+**自定义尺寸**：配置 `Mpx.config.rnConfig.customDimensions` 后，`getSystemInfo`、`getSystemInfoSync`、`getWindowInfo` 返回的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用回调返回的自定义尺寸。`getSystemInfo` 与 `getSystemInfoSync` 的 `deviceOrientation` 根据自定义后的屏幕宽高计算；`safeArea`、`statusBarHeight` 和 `screenTop` 仍使用 RN 原生窗口与安全区信息。
+
 ---
 
 ### base64ToArrayBuffer

docs-vitepress/api-proxy/base/system/getSystemInfo.md

@@ -7,6 +7,8 @@
 
 [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html)
 
+> RN 环境下配置 [`mpx.config.rnConfig.customDimensions`](/guide/rn/application-api.html#foldable-screen-adaption) 后，返回值中的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用自定义尺寸，`deviceOrientation` 根据自定义后的屏幕宽高计算；`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于原生窗口与安全区信息计算。
+
 ### 参数 {#parameters}
 
 **Object object**

docs-vitepress/api-proxy/base/system/getSystemInfoSync.md

@@ -7,6 +7,8 @@ mpx.getSystemInfo 的同步版本。
 
 [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfoSync.html)
 
+> RN 环境下配置 [`mpx.config.rnConfig.customDimensions`](/guide/rn/application-api.html#foldable-screen-adaption) 后，返回值中的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用自定义尺寸，`deviceOrientation` 根据自定义后的屏幕宽高计算；`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于原生窗口与安全区信息计算。
+
 ### 示例代码 {#example-code}
 ```js
 try {

docs-vitepress/api-proxy/base/system/getWindowInfo.md

@@ -6,6 +6,8 @@
 
 [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getWindowInfo.html)
 
+> RN 环境下配置 [`mpx.config.rnConfig.customDimensions`](/guide/rn/application-api.html#foldable-screen-adaption) 后，返回值中的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用自定义尺寸；`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于原生窗口与安全区信息计算。
+
 ### 参数 {#parameters}
 
 **Object**
@@ -52,12 +54,11 @@
 
 ### 示例代码 {#example-code}
 ```js
-const deviceInfo = mpx.getDeviceInfo()
-
-console.log(deviceInfo.abi)
-console.log(deviceInfo.benchmarkLevel)
-console.log(deviceInfo.brand)
-console.log(deviceInfo.model)
-console.log(deviceInfo.platform)
-console.log(deviceInfo.system)
-```
+const windowInfo = mpx.getWindowInfo()
+
+console.log(windowInfo.screenWidth)
+console.log(windowInfo.screenHeight)
+console.log(windowInfo.windowWidth)
+console.log(windowInfo.windowHeight)
+console.log(windowInfo.safeArea)
+```

docs-vitepress/guide/rn/application-api.md

@@ -474,11 +474,28 @@ mpx.config.rnConfig.disablePageTransition = true
 (dimensions: { window: ScaledSize; screen: ScaledSize }) => { window: ScaledSize; screen: ScaledSize } | void
 ```
 
-在某些情况下，我们可能不希望当前应用全屏展示，Mpx 内部基于 ScreenWidth 与 ScreenHeight 作为 rpx、vh、vw、媒体查询、onResize等特性的依赖内容，此时可在 `mpx.config.rnConfig.customDimensions` 中自定义 screen 尺寸信息来得到想要的渲染效果。
+在某些情况下，我们可能不希望当前应用全屏展示。Mpx 内部将屏幕和窗口尺寸作为 `rpx`、`vh`、`vw`、媒体查询、`onResize` 等能力的计算基准，此时可通过 `mpx.config.rnConfig.customDimensions` 自定义 `screen` 和 `window` 尺寸。
 
-可在此方法中返回修改后的 dimensions，如果无返回或返回 undefined，则以入参作为返回值
+回调入参包含当前的 `screen` 与 `window` 尺寸，两者至少包含 `width` 和 `height`。返回的完整尺寸对象会同时用于样式计算，以及 RN 环境下 `mpx.getWindowInfo()`、`mpx.getSystemInfoSync()`、`mpx.getSystemInfo()` 返回的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight`。`getSystemInfo` 系列 API 的 `deviceOrientation` 也会根据自定义后的屏幕宽高计算。
 
-例如: 在折叠屏中我们期望只在其中一半屏上展示，可在 customDimensions 中判断当前是否为折叠屏展开状态，如果是则将 ScreenWidth 设置为原来的一半。
+如果回调未返回值或返回 `undefined`，Mpx 会继续使用原始尺寸。`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于 RN 原生窗口与安全区信息计算，不受该配置影响。
+
+例如，在折叠屏展开时只使用一半屏幕区域，可同时调整 `screen` 和 `window` 的宽度：
+
+```js
+mpx.config.rnConfig.customDimensions = function (dimensions) {
+  if (!isFoldableExpanded()) return
+
+  return {
+    screen: Object.assign({}, dimensions.screen, {
+      width: dimensions.screen.width / 2
+    }),
+    window: Object.assign({}, dimensions.window, {
+      width: dimensions.window.width / 2
+    })
+  }
+}
+```
 
 
 ### 前后台切换 {#app-state-change}

packages/api-proxy/__tests__/rn/system.spec.js

@@ -31,3 +31,67 @@ describe('RN system API', () => {
     expect(getSystemInfoSync().deviceOrientation).toBe(deviceOrientation)
   })
 })
+
+describe('RN window info API', () => {
+  beforeEach(() => {
+    jest.resetModules()
+    global.mpxGlobal = global
+    global.__mpx = {
+      config: {
+        rnConfig: {
+          customDimensions: jest.fn()
+        }
+      }
+    }
+  })
+
+  afterEach(() => {
+    delete global.mpxGlobal
+    delete global.__mpx
+    delete global.__getMpxAppDimensionsInfo
+  })
+
+  test('should use the dimensions processed by customDimensions', () => {
+    const dimensions = {
+      window: { width: 390, height: 844 },
+      screen: { width: 390, height: 844 }
+    }
+    jest.doMock('react-native', () => ({
+      Dimensions: {
+        get: jest.fn((type) => dimensions[type])
+      },
+      PixelRatio: {
+        get: jest.fn(() => 3)
+      }
+    }))
+    jest.doMock('react-native-safe-area-context', () => ({
+      initialWindowMetrics: {
+        insets: { top: 44, left: 0, bottom: 34, right: 0 }
+      }
+    }), { virtual: true })
+    global.__getMpxAppDimensionsInfo = jest.fn(() => ({
+      window: { width: 320, height: 844 },
+      screen: { width: 320, height: 844 }
+    }))
+
+    const { getWindowInfo } = jest.requireActual('../../src/platform/api/system/rnSystem')
+    const windowInfo = getWindowInfo()
+
+    expect(global.__getMpxAppDimensionsInfo).toHaveBeenCalled()
+    expect(global.__mpx.config.rnConfig.customDimensions).not.toHaveBeenCalled()
+    expect(windowInfo).toEqual(expect.objectContaining({
+      windowWidth: 320,
+      windowHeight: 844,
+      screenWidth: 320,
+      screenHeight: 844,
+      safeArea: {
+        left: 0,
+        right: 320,
+        top: 44,
+        bottom: 810,
+        height: 766,
+        width: 320
+      }
+    }))
+  })
+})

packages/api-proxy/src/platform/api/system/rnSystem.js

@@ -3,7 +3,13 @@ import { initialWindowMetrics } from 'react-native-safe-area-context'
 import { getFocusedNavigation } from '../../../common/js'
 
 const getWindowInfo = function () {
-  const dimensionsScreen = Dimensions.get('screen')
+  const nativeDimensions = {
+    window: Dimensions.get('window'),
+    screen: Dimensions.get('screen')
+  }
+  const hasCustomDimensions = typeof mpxGlobal.__mpx?.config?.rnConfig?.customDimensions === 'function'
+  const dimensions = hasCustomDimensions ? global.__getMpxAppDimensionsInfo() : nativeDimensions
+  const dimensionsScreen = dimensions.screen
   const navigation = getFocusedNavigation() || {}
   const initialWindowMetricsInset = initialWindowMetrics?.insets || {}
   const navigationInsets = navigation.insets || {}

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -29,6 +29,11 @@ function useDimensionsInfo (dimensions) {
   global.__mpxAppDimensionsInfo.screen = dimensions.screen
 }
 
+global.__getMpxAppDimensionsInfo = function () {
+  if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
+  return global.__mpxAppDimensionsInfo
+}
+
 function getPageSize (window = global.__mpxAppDimensionsInfo.screen) {
   return window.width + 'x' + window.height
 }
@@ -83,7 +88,7 @@ const empty = {}
 const isNum = (v) => !isNaN(+v)
 
 function formatValue (value, unitType) {
-  if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
+  global.__getMpxAppDimensionsInfo()
   if (unitType && typeof unit[unitType] === 'function') {
     return unit[unitType](+value)
   }