Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xgfe/react-native-stylesheet-xg
extension stylesheet for cross platforms and responsive
https://github.com/xgfe/react-native-stylesheet-xg
Last synced: about 1 month ago
JSON representation
extension stylesheet for cross platforms and responsive
- Host: GitHub
- URL: https://github.com/xgfe/react-native-stylesheet-xg
- Owner: xgfe
- License: mit
- Created: 2016-04-29T10:03:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-18T06:48:30.000Z (about 6 years ago)
- Last Synced: 2024-12-07T08:33:26.354Z (about 2 months ago)
- Language: Objective-C
- Homepage:
- Size: 93.8 KB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-stylesheet-xg ★8 - extension stylesheet for cross platforms and responsive (Components / UI)
- awesome-reactnative-ui - react-native-stylesheet-xg
- awesome-react-native - react-native-stylesheet-xg ★8 - extension stylesheet for cross platforms and responsive (Components / UI)
- awesome-reactnative-ui - react-native-stylesheet-xg
- awesome-react-native - react-native-stylesheet-xg ★8 - extension stylesheet for cross platforms and responsive (Components / UI)
- awesome-react-native-ui - react-native-stylesheet-xg ★5 - extension stylesheet for cross platforms and responsive (Components / UI)
- awesome-react-native - react-native-stylesheet-xg ★8 - extension stylesheet for cross platforms and responsive (Components / UI)
README
# react-native-stylesheet-xg
extension stylesheet for cross platforms and responsive
## Example
Check [index.js](https://github.com/xgfe/react-native-stylesheet-xg/blob/master/example/index.android.js) in the Example folder.
### origin
```javascript
{
test1: {
width: 0,
height: 1,
borderWidth: 100,
$borderRadius: 100,
},
test: {
width: 100,
color: 'red',
android: {
width: 0,
height: 1,
width: 200,
color: 'blue'
},
ios: {
width: 300,
color: 'green'
}
}
}
```
### android (width: 360, base: 320)
```javascript
{
test1: {
width: 0,
height: 1,
borderWidth: 113,
$borderRadius: 100,
},
test: {
width: 225,
color: 'blue',
height: 1
}
}
```
### ios (width: 320, base: 320)
```javascript
{
test1: {
width: 0,
height: 1,
borderWidth: 100,
$borderRadius: 100,
},
test: {
width: 300,
color: 'green'
}
}
```
## Usage
```bash
npm install react-native-stylesheet-xg --save
```
```javascript
import StyleSheet from 'react-native-stylesheet-xg';
// before use, you may need set the base width with StyleSheet.setBase(width:number), which default to 320
StyleSheet.setBase(360); // this is optional, if your target screen is 320
// use react-native-stylesheet-xg replace react-native StyleSheet Module
StyleSheet.create({
test: {
width: 100
}
});
// or you can use StyleSheet.r(num:number) to get the target responsive num
StyleSheet.r(100); // 113 (width: 360, base: 320)
```
| Method | Params | Description |
| :------------ |:---------------:| :---------------:|
| setBase | width:number | set the target width according to the UI |
| setMinWidth | width:number | set the responsive minWidth. If the device width is less than minWidth, will use minWidth as the device width! |
| setMaxWidth | width:number | set the responsive maxWidth. If the device width is greater than minWidth, will use maxWidth as the device width! |
| create | style:object | replace native StyleSheet creating stylesheet |
| r | num:number | the inner function to get the responsive size according to the device with and base |
| switchR | isRon:boolean | set the flag to switch the responsive size function, which return the prev value |