Skip to content

xgfe/react-native-stylesheet-xg

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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