Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Feb 21, 2023. It is now read-only.

Style React-Native components built with webpack

License

NotificationsYou must be signed in to change notification settings

thewei/react-native-css-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

You can use react-native-css-loader width react-native-webpack-server, which can use webpack to built react-native app better.

react-native-css-loader, inspired by gulp-react-native-stylesheet-css, thanks.

Installation

$ npm install react-native --save$ npm install react-native-css-loader --save-dev

Usage

varstyles=require("react-native-css!./file.css");// => returns react-native stylesheet object

Or within the webpack config:

// only css:module:{loaders:[{test:/\.css$/,loader:'react-native-css-loader'}]}// use stylus:module:{loaders:[{test:/\.styl$/,loader:'react-native-css-loader!stylus-loader'}]}// use sass:module:{loaders:[{test:/\.scss$/,loader:'react-native-css-loader!sass-loader'}]}// use less:module:{loaders:[{test:/\.less$/,loader:'react-native-css-loader!less-loader'}]}

Properties supported

Any 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 properties

The following properties output different keys to satisfy React Native's requirements. Unless otherwise noted, the values for each correspond with CSS3.

PropertyExample ValuesNotes
margin2px
2px 4px
3px 1px 5px
1px 3px 2px 6px
padding2px
2px 4px
3px 1px 5px
1px 3px 2px 6px
box-shadownone
0 2px 4px rgba(52, 21, 23, 0.32)
Inset shadows and spread values are not supported.
flex1
1 30px
1 2 10%
Only the first value will be output and the rest will be ignored, as React Native does not support flex-basis or flex-shrink.
transformperspective(90)
rotate(10deg)
rotateX(5deg)
rotateY(10deg)
rotateZ(15deg)
rotate3d(5deg, 10deg, 15deg)
scale(1.2)
scaleX(1.5)
scaleY(0.5)
scale2d(1.5, 0.5) or scale3d(1.5, 0.5)
translateX(5px)
translateY(10px)
translate2d(5px, 10px) or translate3d(5px, 10px)
You may chain multiple transformations together with a space delimiter, like in CSS3 (see example above).

Contributing

  • Fork this Repo first
  • Clone your Repo
  • Install dependencies by$ npm install
  • Checkout a feature branch
  • Feel free to add your features
  • Make sure your features are fully tested
  • Publish your local branch, Open a pull request
  • Enjoy hacking <3

About

Style React-Native components built with webpack

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors3

  •  
  •  
  •  

[8]ページ先頭

©2009-2025 Movatter.jp