React Native Elements 적용하여 쉽게 앱 만들기

웹 개발 중에 Bootstrap과 같은 디자인 라이브러리를 사용하면 쉽게 웹 레이아웃을 만들 수 있다. React Native에도 이와 같이 비슷한 디자인 라이브러리가 있다.

 

여러가지 라이브러리가 있지만, 본 글에서는 React Native Elements 라이브러리를 적용해본다.

 

React Native Elements 적용하기

프로젝트 생성에 대한 코드는 간략히 적는다.

$ react-native init Corona
$ cd Corona

상세한 내용은 2020/05/19 - [React Native] - React Native 프로젝트 생성하기를 참고한다.

1. react-native-elements 설치

# yarn
$ yarn add react-native-elements

# 또는 npm 에서는
$ npm i react-native-elements --save

 

2. react-native-vector-icons 설치

# yarn
yarn add react-native-vector-icons

# 또는 npm
npm i --save react-native-vector-icons

# link
$ react-native link react-native-vector-icons

 

3. 적용 확인을 위한 소스 코드 작성

간단하게 코로나 현황판을 만들었다.

import React from 'react';
import {StyleSheet, ScrollView} from 'react-native';

import {Header, PricingCard} from 'react-native-elements';

const App = () => {
  return (
    <>
      <Header
        placement="left"
        barStyle="light-content"
        leftComponent={{icon: 'menu', color: '#fff'}}
        centerComponent={{text: '코로나 실시간 현황', style: {color: '#fff'}}}
        rightComponent={{icon: 'home', color: '#fff'}}
        containerStyle={styles.headerContainer}
      />
      <ScrollView>
        <PricingCard
          color="#fa5252"
          title="전 세계"
          price="4,886,997"
          info={[
            '누적 확진자: 4,886,997',
            '신규 확진자: 87,131',
            '사망자: 320,794',
            '격리해제: 1,927,864',
          ]}
          button={{title: '더 보기', icon: 'search'}}
        />

        <PricingCard
          color="#4f9deb"
          title="대한민국"
          price="11,078"
          info={[
            '누적 확진자: 11,078',
            '신규 확진자: 13',
            '사망자: 263',
            '격리해제: 9,938',
          ]}
          button={{title: '더 보기', icon: 'search'}}
        />
      </ScrollView>
    </>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    backgroundColor: '#343a40',
    justifyContent: 'space-around',
  },
});

export default App;

 

4. 실행

# Android
$ react-native run-android

# 또는 iOS
$ react-native run-ios

코로나 현황판

---

Reference

• https://react-native-elements.github.io/react-native-elements/