react-native-style-loader

此loader的灵感来自于gulp-react-native-stylesheet-css, 万分感谢该作者.

react-native-style-loader 致力于将reanct native中的css从js中分离出来, 其具有以下几个功能

分离react native中的css

支持css中的px, vw, vh, rem, pt 单位

支持媒体查询 @media query

支持react native stylesheet 的嵌套

引入less loader后, 还可以支持变量定义等功能

支持margin, padding, box-shadow等的简写

class和id的驼峰化

支持calc eg: calc(~'100vh - 49pt')

Installation

$ npm install react-native-style-loader --save-dev

Usage

within the webpack config:

// use less:
//webpack.config.js
// 启动命令 webpack --config webpack.config.js -w

//webpack 1
module.exports = {
    entry: './src/less/index.less',
    output: {
        path: './src/styles',
        filename: 'tmp.js'
    },
    module: {
        loaders: [{
            test: /\.less$/,
            loader: "react-native-style-loader!less"
        }]
    }
};

//webpack 2
var path = require('path');

module.exports = {
    entry: './src/less/index.less',
    output: {
        filename: 'tmp.js',
        path: path.resolve(__dirname, './src/styles')
    },
    module: {
        rules: [{
            test: /\.less$/,
            use: [
                {
                    loader: 'react-native-style-loader'
                },
                {
                    loader: 'less-loader'
                }
            ]
        }]
    }
};

然后你就可以在js 中这样引入了

import styles from './src/styles';

Properties supported

react native中支持的css属性皆全部支持

单位

px 所支持的做小线宽, 如: border: 1px solid #ccc;

pt 和ios中的pt, andorid中的dp一个道理

vw 和css中的vw含义一样, 如 50vw 表示屏幕宽度的50%

vh 和css中的vh含义一样, 如 50vh 表示屏幕高度的50%

rem 和css中的rem含义一样, 你可以像下面这样设置rem的基准

html {
    font-size: 20pt;
}

媒体查询

@media (min-width: 350px) and (max-width: 500px) {
    html {
        font-size: 100pt;
    }
}

嵌套的css

引入less后,你可以像下面这样书写css

.container {
    .box1 {
        width: 50pt;
        height: 20pt;
        background: orange;
    }
    .box2 {
        width: 50rem;
        height: 20pt;
        background: green;
    }
    .m-box {
        width: 50rem;
        height: 20pt;
        background: green;
    }
}

最后将生成如下的style sheet

{
   container: {
        box1: {
            width: 50;
            height: 20;
            backgroundColor: orange;
        }
        box1: {
            width: 50;
            height: 20;
            backgroundColor: green;
        }
        "m-box": {
            width: 50;
            height: 20;
            backgroundColor: green;
        }
        mBox: {
            width: 50;
            height: 20;
            backgroundColor: green;
        }
   }
}

注意, 不支持这样的嵌套

.container {
    .box1 {
        width: 50pt;
        height: 20pt;
        background: orange;
    }
    font-size: 12px;
}

额外支持的特殊属性

Property	Example Values	Notes
margin	2px 2px 4px 3px 1px 5px 1px 3px 2px 6px
padding	2px 2px 4px 3px 1px 5px 1px 3px 2px 6px
box-shadow	none 0 2px 4px rgba(52, 21, 23, 0.32)	Inset shadows and spread values are not supported.
flex	1 1 30px 1 2 10%	Only the first value will be output and the rest will be ignored, as React Native does not support flex-basis or flex-shrink.
transform	perspective(90) rotate(10deg) rotateX(5deg) rotateY(10deg) rotateZ(15deg) rotate3d(5deg, 10deg, 15deg) scale(1.2) scaleX(1.5) scaleY(0.5) scale2d(1.5, 0.5) or scale3d(1.5, 0.5) translateX(5px) translateY(10px) translate2d(5px, 10px) or translate3d(5px, 10px)	You may chain multiple transformations together with a space delimiter, like in CSS3 (see example above).