Illustration © Codeman38
어렸을 때 Final Fantasy와 같은 RPG 게임을 좋아했습니다. 옛날 레트로 느낌을 살려서, Final Fantasy UI 처럼 보이는 컨테이너를 만들어 봅니다.
프로젝트 생성하기
expo-cli를 사용하여 프로젝트를 생성합니다. 프로젝트 명은 ffcontainer라고 하였습니다.
$ expo init ffcontainer
라이브러리 설치
이번에는 styled-components 모듈을 설치하여 사용해 봅니다.
$ yarn add styled-components
FFContainer 만들기
App.js
파일의 내용을 지우고 아래와 같이 작성합니다. 먼저 필요한 모듈을 import 합니다.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Constants, LinearGradient } from 'expo';
import styled from 'styled-components';
그리고 styled-components를 사용하여, 앱 컨테이너를 담당할 <Container>
를 작성합니다. styled-components를 사용하면 다음과 같이 CSS 비슷하게 사용할 수 있습니다.
const Container = styled.View`
flex: 1;
background-color: black;
paddingTop: ${Constants.statusBarHeight};
`;
styled-components로 만든 <Container>
가 어떻게 렌더링되는지 확인해봅니다.
export default class App extends React.Component {
render() {
return (
<Container>
</Container>
);
}
};
이제 본격적으로 FFContainer를 만들어 봅니다. 아래와 같이 작성합니다.
const FFContainer = styled.View`
border-radius: 8;
border-width: 4;
border-color: #e7dfe7;
border-style: solid;
background-color: #e7dfe7;
margin-horizontal: 10;
margin-vertical: 10;
`;
const styles = StyleSheet.create({
FFContents: {
padding: 10,
borderRadius: 5,
}
});
const GRADIENT_COLOR = ['#6c6eb2', '#181870', '#000028'];
export default class App extends React.Component {
render() {
return (
<Container>
<FFContainer>
<LinearGradient
style={styles.FFContents}
colors={GRADIENT_COLOR}>
<Text style={{color:'white'}}>Hello World!</Text>
</LinearGradient>
</FFContainer>
</Container>
);
}
};
아래와 같이 보여집니다.
Fonts 적용하기
이번에는 레트로 감성의 폰트를 적용해봅시다. 구글에서 제공하는 폰트 중에 Press+Start+2P가 있습니다.
Press Start 2P Font를 다운로드 합니다. [여기]에서 다운로드 가능합니다.
App.js
를 수정합니다. expo에서 Font 모듈을 추가로 import 합니다.
import {
Constants,
LinearGradient,
Font, // here
} from 'expo';
그리고 Font.loadAsync를 사용하여 assets 폴더에 있는 Font 파일을 가져옵니다. Font 파일 로딩이 완료되기 전에 Font 를 사용하면 에러가 발생합니다. 그래서state.fontLoaded
로 Font 파일 로딩 완료 여부를 판단할 것 입니다.
export default class App extends React.Component {
state = {
fontLoaded: false // here
}
async componentWillMount() {
await Font.loadAsync({
'PressStart2P': require('./assets/PressStart2P.ttf'),
});
this.setState({ fontLoaded: true });
}
// (...)
expo에서 커스텀 폰트 사용방법은 Using Custom Fonts 문서를 참고하였습니다.
<Text>
에 'Hello World!’ 를 출력하여 Font를 확인해봅니다.
export default class App extends React.Component {
// (...)
render() {
if(this.state.fontLoaded) {
return (
<Container>
<FFContainer>
<LinearGradient
style={ styles.FFContents }
colors={ GRADIENT_COLOR }>
<Text style={{color:'white', fontFamily:'PressStart2P'}}>Hello World!</Text>
</LinearGradient>
</FFContainer>
</Container>
);
}
return null;
}
};
스팀잇 프로필 화면 만들기
스팀잇 프로필을 아래와 같은 UI로 만들어 보았습니다. 화면에서 명성(Reputation)을 LV라고 표현해보았습니다. 게임 화면처럼 보이나요? ㅎㅎ
위 코드 내용은 snack.expo.io에서 확인할 수 있습니다.
여기까지 읽어주셔서 감사합니다.