Skip to content
css和sass文件自动转换成react-native样式文件
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
temple
.gitignore
README.md
README_EN.md
index.js
package-lock.json
package.json
template.js 模板修改 May 6, 2019
yarn.lock

README.md

语言

English

描述

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

安装

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"模板中自定义该函数
  let unitWidth = width / 1080; // 1080 => UI设计图的宽度
  return parseFloat((num*unitWidth).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"
  }
};
群组选择器
.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"模板中自定义该函数
  let unitWidth = width / 1080; // 1080 => UI设计图的宽度
  return parseFloat((num*unitWidth).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"模板中自定义该函数
  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');

function getAdaptation(num){
  let unitWidth = width / 1080; // 1080 => UI设计图的宽度
  return parseFloat((num*unitWidth).toFixed(2));
}

let styles = {};
let media = {};

const styleSheet = StyleSheet.create(styles);

export default styleSheet;
使用自定义模板

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

You can’t perform that action at this time.