在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):DriveWealth/gulp-react-native-stylesheet-css开源软件地址(OpenSource Url):https://github.com/DriveWealth/gulp-react-native-stylesheet-css开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):gulp-react-native-stylesheet-cssGulp plugin for converting CSS files to React Native StyleSheets. Install
You can use it with react-native-extended-stylesheet Basic usagevar gulp = require('gulp'),
sass = require('gulp-sass'),
reactNativeStylesheetCss = require('gulp-react-native-stylesheet-css');
gulp.task('styles', function() {
gulp.src('./src/sass/*.scss')
.pipe(sass())
.pipe(reactNativeStylesheetCss())
.pipe(gulp.dest('./dist/sass/'));
}); SASS or any other CSS preprocessor is not required. Plain .CSS files may be used. Example outputExample using SASS as a preprocessor: Input #header {
margin-bottom: 20;
box-shadow: 0 2px 4px rgba(52, 21, 23, 0.32);
.btn {
padding: 3 8;
text-align: center;
transform: scale(0.8) translateY(4px) rotate3d(20deg, 5deg, 10deg);
}
} Output var React = require('react-native');
var { StyleSheet } = React;
module.exports = StyleSheet.create({
"header": {
"marginBottom": 20,
"shadowColor": "rgb(52,21,23)",
"shadowOffset": {
"width": 0,
"height": 2
},
"shadowOpacity": 0.32,
"shadowRadius": 4
},
"header btn": {
"paddingTop": 3,
"paddingBottom": 3,
"paddingRight": 8,
"paddingLeft": 8,
"textAlign": "center"
"transform": [
{ "scale": 0.8 },
{ "translateY": 4 },
{ "rotateX": "20deg" },
{ "rotateY": "5deg" },
{ "rotateZ": "10deg" }
]
}
}); Properties supportedAny property found in your CSS will be camelCased. By default, this plugin will always output values as JavaScript Number or Boolean objects when appropriate. Values with units attached, including "em" and "px," will be output without their unit suffixes. Special-case propertiesThe following properties output different keys to satisfy React Native's requirements. Unless otherwise noted, the values for each correspond with CSS3.
OptionsAdditional options can be passed to the plugin to customize its output. For example: ...
.pipe(reactNativeStylesheetCss({ outputPlainObject: true }))
.pipe(reactNativeStylesheetCss({ withExtendedStyleSheet: true }))
... Supported options:
AboutLicensed under MIT. Based off of the works of gulp-react-native-css and react-native-css. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论