React Native / Global Style 적용하기, css

 

style을 파일별로 적용하는것이 아니라 

한 파일에서 style 태그만 관리하려고 할 때 Global Style을 만들어 사용한다.

 

 

 

 

 

1. 먼저 최상위 폴더에 styles 폴더 생성 후, global.js 파일을 만들어준다.

 

 

global.js

import { StyleSheet } from "react-native";

export const globalStyles = StyleSheet.create({
    container: {
        padding:24,
        flex:1,
    },
    titleText:{
      fontFamily:'nunito-bold',
      fontSize:18,
      color:'#333',
    },
    paragraph:{
       marginVerical:8,
       lineHeight:20,
    }
  });

 

import { StyleSheet } from "react-native"; 추가하여 style 태그를 쓸 수 있도록 만들고 

globalStyles 변수를 사용해서 각 클래스들을 넣어준다.

 

 

 

 

Home.js

import { globalStyles } from '../styles/global'

export default function Home() {
    return(
        <View style={globalStyles.container}>
            <Text style={globalStyles.titleText}>Home Screen</Text>
        </View>
    )
}

 

이후 globalStyles 파일을 import 하여

해당 페이지에서 globalStyles.클래스명 으로 불러 사용하면 된다.