블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.github.io/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형
웹 개발 중에 Bootstrap과 같은 디자인 라이브러리를 사용하면 쉽게 웹 레이아웃을 만들 수 있다. React Native에도 이와 같이 비슷한 디자인 라이브러리가 있다.
여러가지 라이브러리가 있지만, 본 글에서는 React Native Elements 라이브러리를 적용해본다.
1. React Native Elements 적용하기
프로젝트 생성에 대한 코드는 간략히 적는다.
<html />$ react-native init Corona $ cd Corona
상세한 내용은 2020/05/19 - [React Native] - React Native 프로젝트 생성하기를 참고한다.
1.1. 1. react-native-elements 설치
<python />
# yarn
$ yarn add react-native-elements
# 또는 npm 에서는
$ npm i react-native-elements --save
1.2. 2. react-native-vector-icons 설치
<python />
# yarn
yarn add react-native-vector-icons
# 또는 npm
npm i --save react-native-vector-icons
<python />
# link
$ react-native link react-native-vector-icons
1.3. 3. 적용 확인을 위한 소스 코드 작성
간단하게 코로나 현황판을 만들었다.
<javascript />
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;
1.4. 4. 실행
<javascript /># Android $ react-native run-android # 또는 iOS $ react-native run-ios
2. Reference
반응형
'Mobile > React Native' 카테고리의 다른 글
| React Native, Android 개발을 위한 설치 및 환경 구축 (Mac OSX) (0) | 2020.12.22 |
|---|---|
| React Native XML 파싱 (0) | 2020.07.03 |
| react native navigation 사용하기 (0) | 2020.06.23 |
| React Native 프로젝트 생성하기 (0) | 2020.05.19 |
