Merge pull request #2482 from didi/rn-box-sizing

fix rn box-sizing

Author: hiyuki

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

@@ -443,7 +443,7 @@ Mpx 在 RN 平台支持 CSS 背景图及渐变背景，框架会自动处理样
 | `min-width` / `min-height` | `length` \| `%` | - | 最小尺寸 |
 | `max-width` / `max-height` | `length` \| `%` | - | 最大尺寸 |
 | `aspect-ratio` | `auto` \| `number` \| `width / height` | - | 宽高比 |
-| `box-sizing` | `border-box` \| `content-box` | `border-box` | 盒模型 |
+| `box-sizing` | `border-box` \| `content-box` | `content-box` | 盒模型，RN 原始默认值为 `border-box`，Mpx 中为了跨端表现一致统一默认值为 `content-box`，可通过 `mpx.config.rnConfig.defaultBoxSizing` 配置默认值 |
 | `overflow` | `visible` \| `hidden` \| `scroll` | `visible` | 溢出控制 |
 
 ### 间距 (Margin/Padding)

packages/core/@types/index.d.ts

@@ -279,6 +279,14 @@ export interface WebviewConfig {
  * 输出为 ReactNative 时使用的特殊配置，用于与容器进行功能桥接
  */
 export interface RnConfig {
+  /**
+   * RN 节点未显式声明 box-sizing 时使用的默认盒模型。
+   *
+   * 默认值为 content-box，用于对齐小程序 / Web 的默认行为。
+   * 如需保留 RN 原始默认盒模型，可配置为 border-box。
+   */
+  defaultBoxSizing?: 'border-box' | 'content-box'
+
   /**
    * 当导航状态发生变化时触发，例如页面跳转、返回等。
    *

packages/core/src/index.js

@@ -154,7 +154,9 @@ Mpx.config = {
   /**
   * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
   */
-  rnConfig: {}
+  rnConfig: {
+    defaultBoxSizing: 'content-box'
+  }
 }
 
 init(Mpx)

packages/webpack-plugin/lib/runtime/components/react/mpx-simple-text.tsx

@@ -1,7 +1,7 @@
 import { Text, TextProps } from 'react-native'
 import { JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
-import { extendObject } from './utils'
+import { extendObject, transformBoxSizing } from './utils'
 
 const SimpleText = (props: TextProps): JSX.Element => {
   const {
@@ -14,7 +14,8 @@ const SimpleText = (props: TextProps): JSX.Element => {
       {},
       props,
       {
-        allowFontScaling
+        allowFontScaling,
+        style: transformBoxSizing(extendObject({}, props.style || {}))
       }
     )
   )

packages/webpack-plugin/lib/runtime/components/react/mpx-simple-view.tsx

@@ -1,6 +1,6 @@
 import { View, ViewProps, TextStyle } from 'react-native'
 import { createElement } from 'react'
-import { splitProps, splitStyle, wrapChildren, extendObject } from './utils'
+import { splitProps, splitStyle, wrapChildren, extendObject, transformBoxSizing } from './utils'
 import useInnerProps from './getInnerListeners'
 
 const SimpleView = (simpleViewProps: ViewProps): JSX.Element => {
@@ -13,7 +13,7 @@ const SimpleView = (simpleViewProps: ViewProps): JSX.Element => {
       {},
       props,
       {
-        style: innerStyle
+        style: transformBoxSizing(extendObject({}, innerStyle))
       }
     )
   )

packages/webpack-plugin/lib/runtime/components/react/utils.tsx

@@ -18,6 +18,9 @@ export const DEFAULT_FONT_SIZE = 16
 export const HIDDEN_STYLE = {
   opacity: 0
 }
+export const DEFAULT_BOX_SIZING_STYLE = {
+  boxSizing: 'content-box'
+}
 
 declare const __mpx_mode__: 'ios' | 'android' | 'harmony'
 
@@ -43,6 +46,13 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
 
 export const extendObject = Object.assign
 
+export function transformBoxSizing (style: Record<string, any> = {}) {
+  if (style.boxSizing === undefined) {
+    style.boxSizing = global.__mpx?.config?.rnConfig?.defaultBoxSizing ?? DEFAULT_BOX_SIZING_STYLE.boxSizing
+  }
+  return style
+}
+
 function getSafeAreaInset (name: string, navigation: Record<string, any> | undefined) {
   const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
@@ -552,6 +562,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformBoxShadow(normalStyle)
   // transform 字符串格式转化数组格式(先转数组再处理css var)
   transformTransform(normalStyle)
+  transformBoxSizing(normalStyle)
 
   return {
     hasVarDec,

packages/webpack-plugin/test/platform/wx/style-helper-rn.spec.js

@@ -320,5 +320,24 @@ describe('React Native style validation for CSS variables', () => {
       expect(result).toEqual({})
       expect(config.error).toHaveBeenCalledTimes(2)
     })
+
+    test('should keep explicit box-sizing values', () => {
+      const css = '.content { box-sizing: content-box; } .border { box-sizing: border-box; }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.content).toEqual({
+        boxSizing: '"content-box"'
+      })
+      expect(result.border).toEqual({
+        boxSizing: '"border-box"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
   })
 })