[RN]리액트 네이티브 (19)"RN css를 React css처럼 통제 StyleSheet관리"

- 보통 대부분의 React Native 교재에선 보통 styled-component로 css를 컨트롤 할 것이다.

하지만, 회사에서 유지보수 측면에선 좋은 것은 아니므로 css를 한개에서 컨트롤 하는 것이 나을 것이다.

그렇기에 한개에서 컨트롤 하는 것을 적어보려고 한다.

 

호출 방법은 간단하다. 

const styles = require('../../cssstyle/StyleSheet').member; //css

위와 같이 styles에 함수 설정을 하고 해당 값으로 접근하여 해당 설정한 값을 보면 된다.

 

css파일에선 이렇게 구성하여 놓는다.

const { StyleSheet } = require('react-native');
module.exports = {
  member: StyleSheet.create({
    form: {  
    },
    image: { 
    },
  }),

호출 하는 곳에선 member 값에 접근하였으므로

style={styles.font}

이렇게 해당 파일에서 접근하면 자동으로 먹는다.

 

나도 처음에는 styled-component가 우수하다고 생각했으나 유지보수가 어렵다는 문제가 있어서 짜증났는데,

이렇게 하나로 통제하니 정말 편하더라

 

출처는 stackoverflow.