^{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에서 확인할 수 있습니다.

여기까지 읽어주셔서 감사합니다.

---

_{Sponsored ( Powered by dclick )}