react-native-auto-size

react-native-auto-size

AutoSizeSheet 使用

1. 使用npm：npm install react-native-auto-size --save
   使用yarn：yarn add react-native-auto-size

效果图片

设计图写法

eg1 : 设计图宽度为750px View A width 50px height 100px A 的 style{ width:50, height:100} 出来的样子就是 设计图的设计比例显示

/**
    * 参数 :
    * styles: S, 需要编写的style
    *
    * screenWidth: number = 0, 动态获取 设备的屏幕的的宽度  设置为0
    * 则默认不进行适配 走默认的正常StyleSheet的规则 增
    * 加了 增加 android/ios平台 分别编写
    *
    * designWidth: number = 750 设计图纸的宽度 不用自己计算大小 直接写设计图的尺寸
    *
    * eg1 : 设计图宽度为750px View A  width 50px height 100px
    * A 的 style{ width:50, height:100} 出来的样子就是 设计图的设计比例显示
    *

    *
    */
   styles2 = AutoSizeSheet.create({
     styles2View1: {
       width: 60,
       height: 80,
       android: {
         backgroundColor: 'red'
       },
       ios: {
         backgroundColor: 'green'
       }
     },
     styles2View2: {
       width: 300,
       height: 80,
       backgroundColor: 'green'
     },
     styles2View3: {
       width: 750,
       height: 80,
       backgroundColor: 'red'
     },
   }, this.fillW, 750)

百分比写法

eg2 : designWidth=100 百分比布局 style{ width:50, height:100} 这个是宽度占屏幕的50% 高度为一个屏幕的宽度的100%

   styles3 = AutoSizeSheet.create({
     styles3View1: {
       width: 30,
       height: 20,
       android: {
         backgroundColor: 'red'
       },
       ios: {
         backgroundColor: 'green'
       }
     },
     styles3View2: {
       width: 50,
       height: 20,
       backgroundColor: 'green'
     },
     styles3View3: {
       width: 100,
       height: 20,
       backgroundColor: 'red'
     },
   }, this.fillW, 100);

正常写法

  /**
   * 支持正常StyleSheet 有提示编写style type的提示
   * 增加 android/ios平台 分别编写
   */
  const styles = AutoSizeSheet.create({
    styles1View1: {
      margin: 5,
      width: 60,
      height: 60,
      android: {
        backgroundColor: 'red'
      },
      ios: {
        backgroundColor: 'green'
      }
    },
    styles1View2: {
      margin: 5,
      width: 80,
      height: 80,
      backgroundColor: 'green'
    },
    styles1View3: {
      margin: 5,
      width: 100,
      height: 100,
      backgroundColor: 'red'
    },
  
  });

支持属性

  'borderBottomEndRadius',
  'borderBottomLeftRadius',
  'borderBottomRightRadius',
  'borderBottomStartRadius',
  'borderBottomWidth',
  'borderEndWidth',
  'borderLeftWidth',
  'borderRadius',
  'borderRightWidth',
  'borderStartWidth',
  'borderTopEndRadius',
  'borderTopLeftRadius',
  'borderTopRightRadius',
  'borderTopStartRadius',
  'borderTopWidth',
  'borderWidth',
  'bottom',
  'end',
  'fontSize',
  'height',
  'left',
  'letterSpacing',
  'lineHeight',
  'margin',
  'marginBottom',
  'marginEnd',
  'marginHorizontal',
  'marginLeft',
  'marginRight',
  'marginStart',
  'marginTop',
  'marginVertical',
  'maxHeight',
  'maxWidth',
  'minHeight',
  'minWidth',
  'padding',
  'paddingBottom',
  'paddingEnd',
  'paddingHorizontal',
  'paddingLeft',
  'paddingRight',
  'paddingStart',
  'paddingTop',
  'paddingVertical',
  'right',
  'start',
  'textShadowRadius',
  'top',
  'width'

Licensed

MIT License