• 시작하기
• css와 차이점
• 컴포넌트에 적용하기
• 폰트, 색상, 크기
• 이미지
• Tip

React Native에서 css를 적용하기 위해서 StyleSheet를 import해야한다. 스타일을 적용해야하는 컴포넌트 파일 상단에 import를 해준다.

import { StyleSheet } from 'react-native';

이제 style들을 한곳에 모아 객체로 관리를 해주면 된다. css와는 다른 점이 있는데 이는 객체로 데이터가 저장되기 때문인다.

1. 속성의 이름이 css는 -로 구분이 되어있는데 StyleSheet는 camelCase로 지정한다.
2. 각 속성별 구분자가 css는 ;으로 StyleSheet는 ,로 구분해준다.

.container {
    border-radius: 20px;
}

container: {
    borderRadius: 20,
},

3. shorthand가 적용이 안된다.

.container {
    border: 1px solid black; 
}

container: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'black',
}

4. 자바스크립트의 문법대로 글자는 string으로 숫자는 number형태로 작성해주어야한다.
5. 크기의 단위를 지정해주려면 string으로 사용해야한다.

css에서 class를 지정해준 것 처럼 style을 지정해주어야한다. 모든 컴포넌트는 함수형 컴포넌트로 return으로 html과 비슷한 jsx를 반환하는데 그곳에서 적용해준다.

export default function App(){
    return(
        <View style={{
            flex:1,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <Text>안녕하세요</Text>
        </View>
    )
}

해당 태그에 style 속성을 부여한다. 그 값으로 자바스크립트 문법을 사용하기 위해 {}로 감싸준다. 그 후 실제 값이 객체가 들어가야하기 때문에 다시 {}로 감싸준다.

하지만 저렇게 작성할 경우 코드가 너무 길어지고 보기 불편한 단점이 있다. 그래서 style을 한곳에 모아 관리하도록 한다. 해당 함수 선언 윗부분에 작성한다.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default App(){
    return (
        <View style={styles.container}>
            <Text>ㅎㅇㅎㅇ</Text>
        </View>
    )
}

적용하는 곳에 알맞는 이름을 지어주었으면 한다. 자바스크립트이기 때문에 분기를 나누어서 스타일적용을 할 수도 있고 여러개의 스타일을 배열로 묶어서 적용할 수 있다.

1. 폰트 사용법 components/StyledText.js를 import합니다. 이 안에는 NanumGothic, NanumGothicBold, NanumGothicExtraBold가 들어있습니다. 이 중 사용할 폰트를 가져옵니다. 그 후엔 Text컴포넌트 사용하실 때와 동일하게 사용하시면 됩니다.

import { NanumGothic, NanumGothicBold, NanumGothicExtraBold } from '../components/StyledText';

export default function App(){
    return (
        <View>
            <Text>일반 글씨</Text>
            <NanumGothic>나눔고딕 적용 글씨</NanumGothic>
        </View>
)}

2. 색상 사용법 constants/Colors.js에 많이 사용되는 색상들이 저장 되어 있습니다.
   • mainColor: '#0287cb'
   • tintColor: '#bfe1f2'
   • pauseColor: '#bd1138'
   • ongoingColor: '#7c192f' import해서 사용하시면 됩니다.

import Colors from '../../constants/Colors';

const styles = StyleSheet.create({
    button: {
        backgroundColor: Colors.mainColor,
    }
})

3. 크기 사용법 constants/Layout.js에 폰의 가로길이와 세로길이가 저장 되어 있습니다. flex를 적용할 수 없어 부득이하게 width와 height를 사용해야할 경우 실제 폰의 가로길이에서 비율을 맞추어 적용해주시길 바랍니다. font는 16px을 기본값으로 잡아두었습니다. 폰트크기나 숫자가 직접 적용되는 경우엔 휴대폰 별로 normalize를 해주어야합니다.

import {width, height, font, normalize} from '../../constants/Layout';

const styles = StyleSheet.create({
    button: {
        width: width/3,
        height: height/10
    },
    text: {
        fontSize: normalize(font*2),
    }
})

이미지를 적용하기 위해서 이미지 컴포넌트를 사용한다. assets/images에 있는 이미지를 require해서 사용한다.

import {Image} from 'react-native';

export default function App(){
    return(
        <Image source={require('./../assets/images/MainPage.png')} />
)} 

이미지의 source에는 앱 폴더안에 자체적으로 이미 갖고 있는 이미지나 웹이나 서버에 존재하는 이미지를 불러오는 방법이 존재한다. 이미 갖고 있는 이미지는 require('위치')를 통해 불러오고 외부의 이미지는 {uri:'주소'}로 불러올 수 있다. 이미지는 반드시 크기 속성을 지정해 주어야 하는데 반드시 width와 같은 속성이 아니어도 flex를 이용해서도 적용해 줄 수 있다.

모든 함수형 컴포넌트는 하나의 태그로 감싸져있다. 이 태그의 display 속성의 기본값은 flex이다. flexbox를 이용해 크기를 잘 지정해주었으면 한다.

1. 크기는 절대 수치로 지정하지 않는다. width와 height의 사용을 절대적으로 자제합니다. 크기를 100%로 늘리고 싶다면 flex(grow생략)속성과 alignSelf속성을 이용해봅시다.
2. 크기가 맞게 나오는지 잘 모르겠을 때 borderWidth: 1을 추가해서 어느정도 크기인지 직접 확인해 봅시다.
3. 레이아웃은 flex를 최대한 활용하고 여러 컴포넌트의 크기는 margin과 padding을 이용합니다.
4. 이미지의 크기조절은 resizeMode를 이용할 수 있습니다. 값으로는 contain 또는 cover가 적용될 수 있습니다.
5. 폰트, 메인 테마 색상, 화면사이즈는 components/StyledText.js, constants/Color.js, constants/Layout.js에 들어있습니다. 아직 적용안되었으나 적용해서 사용하시면 됩니다.