• reactnative app 屏幕适配方案(按照设计稿像素大小写就行)


    import React, { Component, PropTypes } from 'react'
    import { Dimensions, PixelRatio, Platform, StatusBar, View } from 'react-native'
    
    let props = {}
    export default class Resolution {
      static get(useFixWidth = true) {
        return useFixWidth
          ? {
              ...props.fw,
            }
          : {
              ...props.fh,
            }
      }
    
      static setDesignSize(dwidth = 750, dheight = 1336, dim = 'window') {
        let designSize = {
           dwidth,
          height: dheight,
        }
    
        let navHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0
        let pxRatio = PixelRatio.get(dim)
        let { width, height } = Dimensions.get(dim)
        if (dim != 'screen') height -= navHeight
        let w = PixelRatio.getPixelSizeForLayoutSize(width)
        let h = PixelRatio.getPixelSizeForLayoutSize(height)
    
        let fw_design_scale = designSize.width / w
        fw_width = designSize.width
        fw_height = h * fw_design_scale
        fw_scale = 1 / pxRatio / fw_design_scale
    
        let fh_design_scale = designSize.height / h
        fh_width = w * fh_design_scale
        fh_height = designSize.height
        fh_scale = 1 / pxRatio / fh_design_scale
    
        props.fw = {
           fw_width,
          height: fw_height,
          scale: fw_scale,
          navHeight,
        }
        props.fh = {
           fh_width,
          height: fh_height,
          scale: fh_scale,
          navHeight,
        }
    
        console.log(
          'winSize',
          JSON.stringify({
            width,
            height,
          })
        )
        console.log(
          'winPixelSize',
          JSON.stringify({
             w,
            height: h,
          })
        )
        console.log('pxRatio', pxRatio)
        console.log('fixWidth', JSON.stringify(props.fw))
        console.log('fixHeight', JSON.stringify(props.fh))
      }
    
      static FixWidthView = (p) => {
        let { width, height, scale, navHeight } = props.fw
        return (
          <View
            {...p}
            style={[
              p.style,
              {
                marginTop: navHeight,
                 width,
                height: height,
                transform: [
                  {
                    translateX: -width * 0.5,
                  },
                  {
                    translateY: -height * 0.5,
                  },
                  {
                    scale: scale,
                  },
                  {
                    translateX: width * 0.5,
                  },
                  {
                    translateY: height * 0.5,
                  },
                ],
              },
            ]}
          />
        )
      }
    
      static FixHeightView = (p) => {
        let { width, height, scale, navHeight } = props.fh
        return (
          <View
            {...p}
            style={[
              p.style,
              {
                marginTop: navHeight,
                 width,
                height: height,
                transform: [
                  {
                    translateX: -width * 0.5,
                  },
                  {
                    translateY: -height * 0.5,
                  },
                  {
                    scale: scale,
                  },
                  {
                    translateX: width * 0.5,
                  },
                  {
                    translateY: height * 0.5,
                  },
                ],
              },
            ]}
          />
        )
      }
    }
    //init
    Resolution.setDesignSize()
    
  • 相关阅读:
    C程序的存储空间布局
    获取系统数据文件信息
    基于UDP的一对回射客户/服务器程序
    一段经典的 Java 风格程序 ( 类,包 )
    Vue 脱坑记
    vue面试题总汇
    JavaScript调试技巧
    伪元素小技巧
    JavaScript 开发人员需要知道的简写技巧
    select2插件改造之设置自定义选项 源码
  • 原文地址:https://www.cnblogs.com/fanzhen/p/12801854.html
Copyright © 2020-2023  润新知