[React-native] Styles 구조

style 외부 파일을 만들어서 사용하기

import { styleSheet } from 'react-native'
const styles = styleSheet.create({
  container: {
	backgroundColor: '#dddddd'
    ...
  }
})
const button = styleSheet.create({
  container: {
	backgroundColor: '#dddddd'
    ...
  }
})
export {styles, button}

기본 스타일을 정의해두고 병합해서 사용하기

import { styleSheet } from 'react-native'

const colors = {
  dark: 'black',
  light: 'white'
}
const baseContainerStyle = {
  flex: 1
}
const baseButtonsStyle = {
  width: 150
}

const lightStyle = styleSheet.create({
  container: {
    ...baseContainerStyle,
    color: colors.light
  },
  button: {
    ...baseButtonsStyle,
    color: colors.light
  }
})

const darkStyle = styleSheet.create({
  container: {
    ...baseContainerStyle,
    color: colors.dark
  },
  button: {
    ...baseButtonsStyle,
    color: colors.light
  }
})

default export getStyles = (theme) => {
  return theme === 'dark'? darkStyle : lightStyle
}

스타일은 중복에서 사용할수 있다

중복된 스타일의 경우 인라인코드가 우선이 된다.

...
<View style={[styles.box, {backgroundColor:'#ddd'}]}>...
...

Color Reference

페이스북 컬러 바로가기

View Style Props Reference

스타일 바로가기