react native 之样式分离

2017-05-14 本文已影响2870人你好啊憨憨米

感慨一发

在这个值得欢庆的周末，回顾一下曾经接触react native的经历，写篇小文章来聊聊和样式相关的小问题。

样式写在了js里，说好的分开，现在又要在一起，一脸懵逼
编辑器在写样式的时候没有代码提示，已经懒癌晚期的我，没有代码提示简直就是噩梦啊
想要一根1px的边线，需要用js去实现
没有媒体查询，没有calc，宝宝不开心

为了让自己布局的时候爽一点呢，作为前端小白的我，搞了一个webpack的loader，专治上面的小问题。

loader提供的小功能

引入less预编译，可以进行变量的定义和模块化管理
提供了px, vw, vh, rem（和css中的功能类似）, pt（类似于ios中的pt）
支持媒体查询 @media query
支持react native stylesheet 的嵌套
支持margin, padding, box-shadow等的简写
自动将id和class驼峰化
提供了calc 功能，例如：calc(~'100vh - 49pt')

使用姿势

安装

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

配置webpack

//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'
                }
            ]
        }]
    }
};

启动webpack

在package.json的scripts中添加如下命令

"scripts": {
    "less": "webpack --config webpack.config.js -w"
 }

然后就可以happy的运行npm run less 来启动啦

引用样式

上面一切准备就绪之后，你就可以在src/less/index.less 文件里编写你喜欢的各种less代码啦，最后嘛，不要忘记在js中引入styles

import styles from './src/styles';

至此，一切似乎就该结束了，骚等，好想忘了贴出github地址 react-native-style-loader

常用功能小贴士

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;
    }
}
.container {
     @media ios {
        padding-top: 20pt;
     }
     @media android {
         padding-top: 25pt;
     }
}

calc

//屏幕高度减去49pt
height: calc(~'100vh - 49pt');

嵌套的css

//输入
.container {
    .box1 {
        width: 50pt;
        height: 20pt;
        background: orange;
    }
    .box2 {
        width: 50rem;
        height: 20pt;
        background: green;
    }
    .m-box {
        width: 50rem;
        height: 20pt;
        background: green;
    }
}
//输出
{
   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;
}

简写样式

属性	取值
margin	2px<br />2px 4px<br />3px 1px 5px<br />1px 3px 2px 6px
padding	2px<br />2px 4px<br />3px 1px 5px<br />1px 3px 2px 6px
box-shadow	none<br />0 2px 4px rgba(52, 21, 23, 0.32)
flex	1<br />1 30px<br />1 2 10%
transform	perspective(90)<br />rotate(10deg)<br />rotateX(5deg)<br />rotateY(10deg)<br />rotateZ(15deg)<br />rotate3d(5deg, 10deg, 15deg)<br />scale(1.2)<br />scaleX(1.5)<br />scaleY(0.5)<br />scale2d(1.5, 0.5) <br /> scale3d(1.5, 0.5)<br />translateX(5px)<br />translateY(10px)<br />translate2d(5px, 10px) <br /> translate3d(5px, 10px)

问题反馈

如果有什么问题，欢迎提issues