같이 읽으면 좋은 글

2019년에 알아야 할 React Native UI 컴포넌트 라이브러리

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

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

NativeBase 설치하기

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

1 2	$ 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 버전을 출시했었네요. 아마 이걸 사용하면 윈도우앱을 만들 수 있을 것 같습니다. ㅋ

코딩, 독서, 여행, 영화, 맛집

[React Native] NativeBase UI 컴포넌트 라이브러리 사용하기

NativeBase 설치하기

NativeBase 사용하기

각 구성요소

결과