语言
描述
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 = ;ToStyles;
.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 toStylesjs
SCSS文件
在.init()
的path
目录下,创建、修改css
或者scss
文件,保存。会在当前目录下生成js
文件。例如:home.scss
如下
.header
homeStyle.js
转换后,生成的;const pixelRatio = PixelRatio;let width height = Dimensions;{ // 可以在"options.templatePath"模板中自定义该函数let unitWidth = width / 1080; // 1080 => UI设计图的宽度return ;}let styles =header:fontSize:lineHeight:header_logo:position: "absolute"header_logo_img:width:height:;const styleSheet = StyleSheet;;
在react native中使用
;...{return<View style=Styleheader><View style=Styleheader_logo><Image source=... style=Styleheader_logo_img/></View></View>;}
示例
font
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:fontVariant:"small-caps""lining-nums"fontSize:lineHeight:fontStyle: "italic"fontWeight: "bold"fontFamily: "Arial";
margin padding
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:marginTop: 0marginBottom: 0marginRight:marginLeft:paddingTop:paddingBottom:paddingRight:paddingLeft:;
border
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:borderWidth:borderColor: "#333"borderStyle: "solid";
text-decoration
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:textDecorationLine: "underline"textDecorationColor: "red"textDecorationStyle: "solid";
text-shadow
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:textShadowOffset:width:height:textShadowRadio:textShadowColor: "red";
shadow
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:shadowOffset:width:height:shadowRadio:shadowOpacity: 5shadowColor: "#888888";
transform
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:transform:translateX:translateY:rotateY: "-10.3deg"scaleX: 5skewX: "60deg";
变量
; // 别的页面也可以使用;.header
↓ ↓ ↓ ↓ ↓ ↓
let styles =header:fontSize:lineHeight:header_left:color: "red";
@import
; // 必须写后缀名.header
// header.scss.header
↓ ↓ ↓ ↓ ↓ ↓
let styles =header:width:color: "red";
群组选择器
.main
↓ ↓ ↓ ↓ ↓ ↓
let styles =main:display: "flex"main_left:position: "absolute"left:main_right:position: "absolute"left: 0;
媒体查询
.main
↓ ↓ ↓ ↓ ↓ ↓
;const pixelRatio = PixelRatio;let width height = Dimensions;{ // 可以在"options.templatePath"模板中自定义该函数let unitWidth = width / 1080; // 1080 => UI设计图的宽度return ;}let styles =main:width:main_top:fontSize:;let media ="width>=500&&width<=1000":main:width: "100%"height:;// 媒体查询{ // 可以在"options.templatePath"模板中自定义该函数forlet k in mediaifforlet j in mediakstylesj = Object;};const styleSheet = StyleSheet;;
自动生成模板
默认的自动生成模板
;const pixelRatio = PixelRatio;let width height = Dimensions;{let unitWidth = width / 1080; // 1080 => UI设计图的宽度return ;}let styles = {};let media = {};const styleSheet = StyleSheet;;
使用自定义模板
修改init(path[, options])
中options.templatePath
模板路径,写入你的模板。