글로벌 영역에서 색상관리

 

 

색상관리를 위한 js 파일 생성

 

 

 

colors.js

const Colors = {

    primary500: '#72063c',

    primary600: '#640233',

    prmiary800: '#3b021f',

    accent500: '#ddb52f',

    primary700: '#4e0329'

}

export default Colors;

 

 

 

하드코딩 되어 있는 부분에서 사용

  return <LinearGradient colors={['#4e0329','#ddb52f']} style={styles.rootScreen}>

 

 

  return <LinearGradient colors={[Colors.primary700, Colors.accent500]} style={styles.rootScreen}>

 

 

 

 

styles 부분에서의 사용

const styles= StyleSheet.create({

  buttonOuterContainer:{

    borderRadius: 28,

    margin: 4,

    overflow: 'hidden'

  },

  buttonInnerContainer: {

    backgroundColor: Colors.primary500,

    borderRadius: 28,

    paddingVertical: 8,

    paddingHorizontal: 16,

    margin: 4,

    elevation: 2

  },