web前端开发RN的福音,css,scss文件自动转换成react native直接引用的样式文件



  • 传送门

    github: react-native-sass-to-stylesheet
    npm: react-native-sass-to-stylesheet

    描述

    css文件自动转换成react-native样式文件。
    1、支持变量
    2、支持媒体查询
    3、支持嵌套
    4、支持transform
    5、适配各种手机
    6、支持群组选择器
    7、忽略文件
    8、scss文件支持@import

    安装

    npm install react-native-sass-to-stylesheet --save-dev
    

    使用

    初始化

    新建toStyles.js,并添加以下内容

    const ToStyles = require("react-native-sass-to-stylesheet");
    
    ToStyles.init(path[, options]);
    

    .init(path[, options])

    • path{string} 要监听的文件夹路径,必须
    • options{object}
      • space{number} css文件缩进值,默认2
      • postfix{string} 转换生成的js文件后缀,默认Style.js。例如:home.scss转换生成homeStyle.js
      • initTransform{boolean} 启动服务后,是否自动转换所有的css文件,默认false
      • adaptation{boolean} 适配各种手机,默认true。如果单个样式不需要适配,请添加!important标志
      • templatePath{string} 自动转换文件模板路径,默认./template.js
      • ignored{array} 忽略文件"xxx.scss",忽略文件夹"home"或者"component/home",默认[]
    启动
    node toStyles.js
    
    SCSS文件

    .init()path目录下,创建、修改css或者scss文件,保存。会在当前目录下生成js文件。例如:home.scss如下

    .header {
      font: 12px/24px;
      .logo {
        position: absolute;
        .img {
          width: 100px;
          height: 100px;
        }
      }
    }
    
    转换后,生成的homeStyle.js
    import {StyleSheet, PixelRatio, Dimensions} from 'react-native';
    const pixelRatio = PixelRatio.get();
    let {width, height} =  Dimensions.get('window');
    
    function getAdaptation(num){    // 可以在"options.templatePath"模板中自定义该函数
      return parseFloat((num / pixelRatio).toFixed(2));
    }
    
    let styles = {
      header: {
        fontSize: getAdaptation(12),
        lineHeight: getAdaptation(24)
      },
      header_logo: {
        position: "absolute"
      },
      header_logo_img: {
        width: getAdaptation(100),
        height: getAdaptation(100)
      }
    };
    
    const styleSheet = StyleSheet.create(styles);
    export default styleSheet;
    
    在react native中使用
    import Style from "homeStyle.js";
    ...
    render(){
        return (
           <View style={Style.header}>
               <View style={Style.header_logo}>
                   <Image source={...} style={Style.header_logo_img}/>
               </View>
           </View>
        );
    }
    

    示例

    font
    .main {
        font: italic bold 12px/24px "Arial";
        font-variant: small-caps, lining-nums;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        fontVariant: [
          "small-caps",
          "lining-nums"
        ],
        fontSize: getAdaptation(12),
        lineHeight: getAdaptation(24),
        fontStyle: "italic",
        fontWeight: "bold",
        fontFamily: "Arial"
      }
    };
    
    margin padding
    .main {
      margin: 0 10px;
      padding: 1px 2px 3px;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        marginTop: 0,
        marginBottom: 0,
        marginRight: getAdaptation(10),
        marginLeft: getAdaptation(10),
        paddingTop: getAdaptation(1),
        paddingBottom: getAdaptation(3),
        paddingRight: getAdaptation(2),
        paddingLeft: getAdaptation(2),
      }
    };
    
    border
    .main {
      border: 1px solid #333;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        borderWidth: getAdaptation(1),
        borderColor: "#333",
        borderStyle: "solid"
      }
    };
    
    text-decoration
    .main {
      text-decoration: underline solid red;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        textDecorationLine: "underline",
        textDecorationColor: "red",
        textDecorationStyle: "solid"
      }
    };
    
    text-shadow
    .main {
      text-shadow: 5px 5px 10px red;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        textShadowOffset: {
          width: getAdaptation(5),
          height: getAdaptation(5)
        },
        textShadowRadio: getAdaptation(10),
        textShadowColor: "red"
      }
    };
    
    shadow
    .main {
      box-shadow: 10px 10px 5px .5 #888888;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        shadowOffset: {
          width: getAdaptation(10),
          height: getAdaptation(10)
        },
        shadowRadio: getAdaptation(5),
        shadowOpacity: .5,
        shadowColor: "#888888"
      }
    };
    
    transform
    .main {
      transform: translate(10px, 20px) rotateY(-10.3deg) scaleX(.5) skew(60deg);
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        transform: [
          {
            translateX: getAdaptation(10),
            translateY: getAdaptation(20)
          },
          {
            rotateY: "-10.3deg"
          },
          {
            scaleX: .5
          },
          {
            skewX: "60deg"
          }
        ]
      }
    };
    
    变量
    $size: 12px !global; // 别的页面也可以使用
    $color: red;
    .header {
      font: $size/24px;
      .left {
        color: $color;
      }
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      header: {
        fontSize: getAdaptation(12),
        lineHeight: getAdaptation(24)
      },
      header_left: {
        color: "red"
      }
    };
    
    @import
    @import "../header.scss"; // 必须写后缀名
    .header {
      color: red;
    }
    
    // header.scss
    .header {
      width: 100px;
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      header: {
        width: getAdaptation(100),
        color: "red"
      }
    };
    
    群组选择器
    .main {
      display: flex;
      .left, .right {
        position: absolute;
        left: 0;
      }
      .left {
        left: 10px;
      }
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    let styles = {
      main: {
        display: "flex"
      },
      main_left: {
        position: "absolute",
        left: getAdaptation(10)
      },
      main_right: {
        position: "absolute",
        left: 0
      }
    };
    
    媒体查询
    .main {
      width: 500px;
    }
    @media only screen and (min-width: 500px) and (max-width: 1000px) {
      .main {
        width: 100%;
        height: 1000px;
      }
    }
    

    ↓ ↓ ↓ ↓ ↓ ↓

    import {StyleSheet, PixelRatio, Dimensions} from 'react-native';
    const pixelRatio = PixelRatio.get();
    let {width, height} =  Dimensions.get('window');
    
    function getAdaptation(num){    // 可以在"options.templatePath"模板中自定义该函数
      return parseFloat((num / pixelRatio).toFixed(2));
    }
    
    let styles = {
      main: {
        width: getAdaptation(500)
      },
      main_top: {
        fontSize: getAdaptation(12)
      }
    };
    
    
    let media = {
      "width>=500&&width<=1000": {
        main: {
          width: "100%",
          height: getAdaptation(1000)
        }
      }
    };
    
    // 媒体查询
    (function addMedia(){   // 可以在"options.templatePath"模板中自定义该函数
      width = parseFloat((width * pixelRatio).toFixed(2));
      for(let k in media){
        if(eval(k)){
          for(let j in media[k]){
            styles[j] = Object.assign(styles[j] || {}, media[k][j]);
          }
        }
      }
    }());
    const styleSheet = StyleSheet.create(styles);
    export default styleSheet;
    

    自动生成模板

    默认的自动生成模板
    import {StyleSheet, PixelRatio, Dimensions} from 'react-native';
    const pixelRatio = PixelRatio.get();
    let {width, height} =  Dimensions.get('window');
    
    /*
    自动生成区域
    */
    
    const styleSheet = StyleSheet.create(styles);
    
    export default styleSheet;
    
    使用自定义模板

    修改init(path[, options])options.templatePath模板路径,写入你的模板。

    传送门

    github: react-native-sass-to-stylesheet
    npm: react-native-sass-to-stylesheet



  • 适配"各种手机“优化,更方便易懂



  • 增加”群组选择器“功能



  • 增加忽略文件功能



  • scss文件支持@import功能



  • 解决@import文件中继续@import文件的bug


Log in to reply