[React Native] GlobalStyles 전역(공통) 스타일

React Native GlobalStyles 전역적, 공통적 스타일

React Native 앱 개발 특히 프론트엔드(Front end) 개발을 하다 보면 페이지 레이아웃(style), 색상(color), 높이(height), 넓이(weight) 등 공통적으로 사용하게 되는 style들이 많이 존재하게 됩니다.

 

매번 javascript(js)파일에서 style을 지정해주는 것도 너무 번거롭고 합니다.

공통으로 즉 전역적으로 사용할 스타일(style) 혹은 속성을 따로 만들어서 불러와 사용하면 좀 더 편하고 효과적으로 개발을 하실 수 있게 됩니다.

 

저는 config 폴더를 만들고 그안에 globalStyles.js 파일을 만들어 주었습니다.

globalStyles.js

export const screenStyle = {
    marginHorizontal: 16,
    marginVertical: 10
};

공통적으로 스크린에서 사용될 style을 만들고 margin을 넣어주었습니다.

 

이제 사용할 js파일에 가서 globalStyles.js 파일을 import 해주시고 사용하시면 됩니다.

아래는 React Native functional Component Hooks를 사용하여 스크린 화면을 만든 예시입니다.

 

Main.js

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import { screenStyle } from '../config/globalStyles';

const Main = ({ navigation }) => {

    return(
        <View style={screenStyle}>
            <Text> Main Screen </Text>
        </View>
    )
}

export default Main;