Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

react-native-stylesheet-xg

extension stylesheet for cross platforms and responsive

Example

Check index.js in the Example folder.

origin

{
  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)

{
  test1: {
    width: 0,
    height: 1,
    borderWidth: 113,
    $borderRadius: 100,
  },
  test: {
    width: 225,
    color: 'blue',
    height: 1
  }
}

ios (width: 320, base: 320)

{
  test1: {
    width: 0,
    height: 1,
    borderWidth: 100,
    $borderRadius: 100,
  },
  test: {
    width: 300,
    color: 'green'
  }
}

Usage

npm install react-native-stylesheet-xg --save
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
You can’t perform that action at this time.