功能说明
将css样式和RN样式互相转换
CSS转RN时:
- 支持删除非RN样式的key
- background 为颜色时转换成 backgroundColor
- border、border-left等属性会转换成borderWidth、borderColor等属性(因缺省时判断是何属性较复杂,暂时均按照 【border: border-width border-style border-color】结构处理)
快捷键
ctrl + 9 :css转RN style
ctrl + 8 :RN style转css
ctrl + - :附赠小功能,将选中元素在小驼峰、下划线、中划线间转换
配置
配置项 |
类型 |
默认值 |
描述 |
css-to-rnstyle.delete-if-not-rn-keys |
boolean |
true |
css转RN样式时,是否删除非RN样式的key,默认删除 |
示例1
片段1:
position: absolute;
left: 50px;
top: 192px;
width: 1804px;
height: 1181px;
opacity: 1;
background: #FFFFFF;
box-sizing: border-box;
border: 1px solid #BFBFBF;
片段2:
position: absolute;
left: 50px;
top: 192px;
width: 1804px;
height: 1181px;
opacity: 1;
background-color: #FFFFFF;
border-width:1px;
border-style:solid;
border-color:#BFBFBF;
片段3:
position: absolute;
left: 50px;
top: 192px;
width: 1804px;
height: 1181px;
opacity: 1;
background-color: #FFFFFF;
border-width:1px;
border-style:solid;
border-color:#BFBFBF;
ctrl + 9 将片段1转换为片段2
ctrl + 8 将片段2转换为片段3
示例2
快捷键 ctrl + - 将单词像下列形式转换
convertRnStyleToCss
↓ ↖
convert_rn_style_to_css → convert-rn-style-to-css
| |