fix: 修复 inline style 单位 px 没有转换成 rpx 的问题

fix #320
remaxjs · Nov 8, 2019 · b5a366a · b5a366a · vercel · Nov 8, 2019
1 parent 8e59eee
commit b5a366a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap b/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap
@@ -218,7 +218,7 @@ Object {
  ],
  "id": 2,
  "props": Object {
- "style": "width:100px;height:100px;",
+ "style": "width:100rpx;height:100rpx;",
  },
  "text": undefined,
  "type": "view",
@@ -243,7 +243,7 @@ Object {
  ],
  "id": 2,
  "props": Object {
- "style": "-webkit-line-clamp:2;height:100px;",
+ "style": "-webkit-line-clamp:2;height:100rpx;",
  },
  "text": undefined,
  "type": "view",

diff --git a/packages/remax/src/utils/plainStyle.ts b/packages/remax/src/utils/plainStyle.ts
@@ -17,14 +17,26 @@ const transformReactStyleKey = (key: string) => {
  return styleValue;
 };
 
+const transformPx = (value: string) => {
+ if (typeof value !== 'string') {
+ return value;
+ }
+
+ return value.replace(/\b(\d+(\.\d+)?)px\b/g, function(match, x) {
+ const targetUnit = 'rpx';
+ const size = x;
+ return size % 1 === 0 ? size + targetUnit : size.toFixed(2) + targetUnit;
+ });
+};
+
 const plainStyle = (style: CSSProperties | null | undefined) => {
  if (!style) {
  return '';
  }
  return Object.keys(style)
  .reduce((acc: string[], key) => {
  const value = (style as any)[key];
- return [...acc, `${transformReactStyleKey(key)}:${value};`];
+ return [...acc, `${transformReactStyleKey(key)}:${transformPx(value)};`];
  }, [])
  .join('');
 };