语言
描述
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"，默认[]。
- space{number} css文件缩进值，默认
启动
node toStyles.jsSCSS文件
在.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"
}
};@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"模板中自定义该函数
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模板路径，写入你的模板。