fix: 修复 pxTransform 问题

Garfield550 · Garfield550 · commit ffd80b1358d6 · 2020-03-26T19:08:57.000+08:00
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -216,7 +216,13 @@ function handleTouchScroll(flag: any): void {
 
 function pxTransform(size: number): string {
   if (!size) return ''
-  return Taro.pxTransform(size)
+  const designWidth = 750
+  const deviceRatio = {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  }
+  return `${size / deviceRatio[designWidth]}rpx`
 }
 
 function objectToString(style: object | string): string {
diff --git a/src/components/divider/index.tsx b/src/components/divider/index.tsx
@@ -3,8 +3,7 @@ import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
 import { AtDividerProps } from 'types/divider'
 import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import { mergeStyle } from '../../common/utils'
+import { mergeStyle, pxTransform } from '../../common/utils'
 
 export default class AtDivider extends React.Component<AtDividerProps> {
   public static defaultProps: AtDividerProps
@@ -22,12 +21,12 @@ export default class AtDivider extends React.Component<AtDividerProps> {
     } = this.props
 
     const rootStyle = {
-      height: height ? `${Taro.pxTransform(Number(height))}` : ''
+      height: height ? `${pxTransform(Number(height))}` : ''
     }
 
     const fontStyle = {
       color: fontColor,
-      'font-size': fontSize ? `${Taro.pxTransform(Number(fontSize))}` : ''
+      'font-size': fontSize ? `${pxTransform(Number(fontSize))}` : ''
     }
 
     const lineStyle: React.CSSProperties = {
diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
@@ -3,8 +3,7 @@ import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
 import { AtIconProps } from 'types/icon'
 import { Text } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import { mergeStyle } from '../../common/utils'
+import { mergeStyle, pxTransform } from '../../common/utils'
 
 export default class AtIcon extends React.Component<AtIconProps> {
   public static defaultProps: AtIconProps
@@ -25,7 +24,7 @@ export default class AtIcon extends React.Component<AtIconProps> {
     } = this.props
 
     const rootStyle = {
-      fontSize: `${Taro.pxTransform(parseInt(String(size)) * 2)}`,
+      fontSize: `${pxTransform(parseInt(String(size)) * 2)}`,
       color
     }
 
diff --git a/src/components/indexes/index.tsx b/src/components/indexes/index.tsx
@@ -6,7 +6,12 @@ import { AtIndexesProps, AtIndexesState, Item } from 'types/indexes'
 import { ScrollView, View } from '@tarojs/components'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
 import Taro from '@tarojs/taro'
-import { delayQuerySelector, isTest, uuid } from '../../common/utils'
+import {
+  delayQuerySelector,
+  isTest,
+  uuid,
+  pxTransform
+} from '../../common/utils'
 import AtList from '../list/index'
 import AtListItem from '../list/item/index'
 import AtToast from '../toast/index'
@@ -176,7 +181,7 @@ export default class AtIndexes extends React.Component<
       isWEB
     } = this.state
 
-    const toastStyle = { minWidth: Taro.pxTransform(100) }
+    const toastStyle = { minWidth: pxTransform(100) }
     const rootCls = classNames('at-indexes', className)
 
     const menuList = list.map((dataList, i) => {
diff --git a/src/components/input-number/index.tsx b/src/components/input-number/index.tsx
@@ -5,8 +5,7 @@ import React from 'react'
 import { AtInputNumberProps, InputError } from 'types/input-number'
 import { Input, Text, View } from '@tarojs/components'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
-import Taro from '@tarojs/taro'
-import { initTestEnv } from '../../common/utils'
+import { pxTransform } from '../../common/utils'
 
 // TODO: Check all types
 
@@ -39,8 +38,6 @@ function parseValue(num: string): string {
   return _toString(num)
 }
 
-initTestEnv()
-
 type ExtendEvent = {
   target: {
     value: string | number
@@ -100,7 +97,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
 
       this.handleError({
         type: 'OVER',
-        errorValue: resultValue!
+        errorValue: resultValue
       })
     }
 
@@ -143,7 +140,7 @@ export default class AtInputNumber extends React.Component<AtInputNumberProps> {
     } = this.props
 
     const inputStyle = {
-      width: width ? `${Taro.pxTransform(width)}` : ''
+      width: width ? `${pxTransform(width)}` : ''
     }
     const inputValue = Number(this.handleValue(value))
     const rootCls = classNames(
diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
@@ -1,7 +1,7 @@
 import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
 import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
+import { pxTransform } from '../../common/utils'
 
 interface AtLoadingProps {
   size?: string | number
@@ -16,8 +16,8 @@ export default class AtLoading extends React.Component<AtLoadingProps> {
     const { color, size } = this.props
     const loadingSize = typeof size === 'string' ? size : String(size)
     const sizeStyle = {
-      width: size ? `${Taro.pxTransform(parseInt(loadingSize))}` : '',
-      height: size ? `${Taro.pxTransform(parseInt(loadingSize))}` : ''
+      width: size ? `${pxTransform(parseInt(loadingSize))}` : '',
+      height: size ? `${pxTransform(parseInt(loadingSize))}` : ''
     }
     const colorStyle = {
       border: color ? `1px solid ${color}` : '',
diff --git a/src/components/nav-bar/index.tsx b/src/components/nav-bar/index.tsx
@@ -5,8 +5,7 @@ import React from 'react'
 import { AtNavBarProps } from 'types/nav-bar'
 import { Text, View } from '@tarojs/components'
 import { ITouchEvent } from '@tarojs/components/types/common'
-import Taro from '@tarojs/taro'
-import { mergeStyle } from '../../common/utils'
+import { mergeStyle, pxTransform } from '../../common/utils'
 
 export default class AtNavBar extends React.Component<AtNavBarProps> {
   public static defaultProps: AtNavBarProps
@@ -104,7 +103,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
               style={mergeStyle(
                 {
                   color: leftIconInfo.color,
-                  fontSize: `${Taro.pxTransform(
+                  fontSize: `${pxTransform(
                     parseInt(leftIconInfo.size.toString()) * 2
                   )}`
                 },
@@ -132,7 +131,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
                 style={mergeStyle(
                   {
                     color: rightSecondIconInfo.color,
-                    fontSize: `${Taro.pxTransform(
+                    fontSize: `${pxTransform(
                       parseInt(rightSecondIconInfo.size.toString()) * 2
                     )}`
                   },
@@ -155,7 +154,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
                 style={mergeStyle(
                   {
                     color: rightFirstIconInfo.color,
-                    fontSize: `${Taro.pxTransform(
+                    fontSize: `${pxTransform(
                       parseInt(rightFirstIconInfo.size.toString()) * 2
                     )}`
                   },
diff --git a/src/components/rate/index.tsx b/src/components/rate/index.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { AtRateProps } from 'types/rate'
 import { Text, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
-import Taro from '@tarojs/taro'
+import { pxTransform } from '../../common/utils'
 
 export default class AtRate extends React.Component<AtRateProps> {
   public static defaultProps: AtRateProps
@@ -25,7 +25,7 @@ export default class AtRate extends React.Component<AtRateProps> {
     } = this.props
 
     const iconStyle = {
-      marginRight: Taro.pxTransform(margin)
+      marginRight: pxTransform(margin)
     }
     const starIconStyle = {
       fontSize: size ? `${size}px` : ''
diff --git a/src/components/textarea/index.tsx b/src/components/textarea/index.tsx
@@ -5,6 +5,7 @@ import { AtTextareaProps } from 'types/textarea'
 import { Textarea, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import Taro from '@tarojs/taro'
+import { pxTransform } from '../../common/utils'
 
 type ExtendEvent = {
   target: {
@@ -72,9 +73,7 @@ export default class AtTextarea extends React.Component<AtTextareaProps> {
 
     const _maxLength = parseInt(maxLength.toString())
     const actualMaxLength = getMaxLength(_maxLength, textOverflowForbidden)
-    const textareaStyle = height
-      ? `height:${Taro.pxTransform(Number(height))}`
-      : ''
+    const textareaStyle = height ? `height:${pxTransform(Number(height))}` : ''
     const rootCls = classNames(
       'at-textarea',
       `at-textarea--${ENV}`,
