All Articles

NativeBase UI 컴포넌트 라이브러리 사용하기

스크린샷 2019-01-04 22.53.52.png



같이 읽으면 좋은 글



NativeBaseReact Native를 위한 크로스 플랫폼 UI 컴포넌트 오픈 소스이다. 현재 버전 v2.7.0까지 릴리즈 되었다. 그리고 KitchenSink에서 NativeBase로 구현된 샘플 앱과 예제 소스를 확인할 수 있다.

NativeBase 처럼 미리 만들어진 UI 컴포넌트 툴킷을 사용하면, React Native 개발 시간을 절약할 수 있다.



NativeBase 설치하기

공식 문서를 참고하여 설치한다.

$ npm install native-base --save
$ react-native link

Expo에서 사용하려면 @expo/vector-icons 모듈을 설치해야한다.



NativeBase 사용하기

NativeBase를 사용하는 일반적인 방법은 <Container> 내에 모든 컴포넌트를 포함하는 것이다.

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
export default class AnatomyExample extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Text>
            This is Content Section
          </Text>
        </Content>
        <Footer>
          <FooterTab>
            <Button full>
              <Text>Footer</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

각 구성요소

컴포넌트 설명
<Header> 화면의 헤더 를 렌더링한다. <Button> , <Title> 를 포함할 수 있다.
<Content> 화면의 메인 컨텐츠를 나타낸다. 한 화면에는 하나의 <Content> 컴포넌트만 있을 수 있다.
<Footer> 화면에서 푸터 를 렌더링한다. <FooterTab> 을 포함할 수 있다.



결과

위의 간단한 코드를 실행한 결과화면이다.


* * *

「기술 동향 : React vs Angular vs Vue」 을 읽어보면, React의 인기가 점점 증가하고 있습니다. 대부분의 코인 거래소가 React로 개발되어 있을 정도로, 이제는 Front-End 웹개발에서 React를 제외하고 이야기하기가 어렵습니다.

사실 React-Native는 React 인기 득을 크게 보는 것 같습니다. 그리고 최근에 안 사실인데, Micrisoft에서 react-native-windows 버전을 출시했었네요. 아마 이걸 사용하면 윈도우앱을 만들 수 있을 것 같습니다. ㅋ


Sponsored ( Powered by dclick )
[보드게임] 연말연시 파티게임 추천!

안녕하세요 여러분! 요즘 연말이라고, 연초라고 모임 많으시죠? 모여서 하는 것이라고는 술밖에 …

Published 4 Jan 2019

안피곤의 블로그입니다.