How to use the @tarojs/taro.pxTransform function in @tarojs/taro

render () {
    const { itemInfo } = this.props
    const { itemDetail = {} } = itemInfo
    const gallery = [
      itemInfo.listPicUrl,
      itemDetail.picUrl1, itemDetail.picUrl2, itemDetail.picUrl3, itemDetail.picUrl4
    ].filter(i => i)
    const height = getWindowHeight(false)
    // XXX RN 的 transform 写法不同，这块可以统一放到 @utils/style 的 postcss() 中处理
    const popupStyle = process.env.TARO_ENV === 'rn' ?
      { transform: [{ translateY: Taro.pxTransform(-100) }] } :
      { transform: `translateY(${Taro.pxTransform(-100)})` }

    if (!this.state.loaded) {
      return 
    }

    return (

render () {
    const BUTTON = {
      marginTop: Taro.pxTransform(30)
    }

    return (

render () {
    const {
      className,
      customStyle,
      content,
      height,
      fontColor,
      fontSize,
      lineColor,
    } = this.props

    const rootStyle = {
      height: height ? `${Taro.pxTransform(height)}` : ''
    }

    const fontStyle = {
      'color': fontColor,
      'font-size': fontSize ? `${Taro.pxTransform(fontSize)}` : ''
    }

    const lineStyle = {
      'background-color': lineColor
    }

    return (

render() {
    let { src, width = 0, height = 0, className, mode = 'scaleToFill', onClick, style } = this.props;
    width = width && Taro.pxTransform(width);
    height = height && Taro.pxTransform(height);

    if (style == null || typeof style === 'undefined') {
      style = '';
    }
    return (
      <img src="{src}" height="" style="{'display:" mode="{mode}">
    );
  }
}

const {
      className,
      customStyle,
      animation,
      topKey,
      list,
    } = this.props
    const {
      _scrollTop,
      _scrollIntoView,
      _tipText,
      _isShowToast,
      isWEB
    } = this.state

    const toastStyle = { minWidth: Taro.pxTransform(100) }
    const rootCls = classNames('at-indexes', className)

    const menuList = list.map((dataList, i) => {
      const { key } = dataList
      const targetView = `at-indexes__list-${key}`
      return 
    })

    const indexesList = list.map(dataList => (

if (!this.state.loaded) {
      return 
    }

    if (!this.state.login) {
      return (
        
      )
    }

    return (

className,
      customStyle,
      content,
      height,
      fontColor,
      fontSize,
      lineColor,
    } = this.props

    const rootStyle = {
      height: height ? `${Taro.pxTransform(height)}` : ''
    }

    const fontStyle = {
      'color': fontColor,
      'font-size': fontSize ? `${Taro.pxTransform(fontSize)}` : ''
    }

    const lineStyle = {
      'background-color': lineColor
    }

    return (

constructor () {
    super(...arguments)
    const isWEAPP = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
    const offset = isWEAPP ? parseInt(Taro.pxTransform(this.props.size).replace('rpx')) : this.props.size
    const windowWidth = isWEAPP ? Taro.getSystemInfoSync().windowWidth : window.innerWidth
    const windowHeight = isWEAPP ? Taro.getSystemInfoSync().windowHeight : window.innerHeight
    this.state = {
      position: {
        left: `${(windowWidth * 0.85) - offset}px`,
        top: `${(windowHeight * 0.90) - offset}px`
      },
      offset,
      movableRangeWidth: (windowWidth * 0.95) - (2 * offset),
      movableRangeHeight: (windowHeight * 0.95) - (2 * offset),
      backgroundColor: this.props.backgroundColor,
      isWEAPP,
    }
  }

render () {
    const {
      customStyle,
      className,
      prefixClass,
      value,
      size,
      color
    } = this.props

    const rootStyle = {
      fontSize: `${Taro.pxTransform(parseInt(size) * 2)}`,
      color
    }

    const iconName = value ? `${prefixClass}-${value}` : ''
    return (
      
    )

)
              })}
            
          }
        
        
      
    )
  }
}