Skip to content

MonkeyKingPlus/react-native-style-helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-style-helper

npm version npm license npm download npm download

Install

$ npm install mkp-react-native-style-helper --save

Support

android/ios

Quick Start

import {StyleSheet} from "react-native";
import {padding,margin,shadow} from "mkp-react-native-style-helper";

const styles=StyleSheet.create({
	style1:{
		...padding(10),
		...margin(10)
	},
	style2:{
		...padding(10,5),
		...margin(10,5)
	},
	style3:{
		...padding(1,2,3,4),
		...margin(1,2,3,4),
		...shadow()
	}
});

Methods

padding

support three styles

  • padding(all:Number)
  • padding(topAndBottom:Number,leftAndRight:Number)
  • padding(top:Number,right:Number,bottom:Number,left:Number)

margin

support three styles

  • margin(all:Number)
  • margin(topAndBottom:Number,leftAndRight:Number)
  • margin(top:Number,right:Number,bottom:Number,left:Number)

shadow (Only IOS)

shadow(color = "#000000", opacity = 0.2, radius = 1, offset={width:0,height:2})

getResponsiveValue

getResponsiveValue(value:Number,designDensity:Number=2,designScreenWidth:Number=375)

getResponsiveFontSize

getResponsiveFontSize(value:Number,designDensity:Number=2)