NativeBase란?

NativeBase는 React Native를 위한 오픈소스 UI 컴포넌트 라이브러리 입니다. 동일한 코딩으로 Android와 iOS에 유사한 스타일로 표현할 수 있는게 장점입니다.

설치

react-native의 init 명령을 이용하여 프로젝트를 생성합니다.

react-native init AwesomeNativeBase
cd AwesomeNativeBase

프로젝트에 native-base 라이브러리를 추가합니다.

npm install native-base --save

추가 종속을 위하여 다음 명령까지 하시면 설치는 끝납니다.

react-native link

사용하기

먼저 src/Application.js 를 생성해서 기본 화면을 구성합니다.

import React, { Component } from 'react';
import { Text } from 'react-native';
import {
    Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon
} from 'native-base';

export default class Application extends Component {
    render() {
        return (
            <Container>
                <Header>
                    <Left>
                        <Button transparent>
                            <Icon name='menu' />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Header</Title>
                    </Body>
                    <Right />
                </Header>

                <Content>
                </Content>

                <Footer>
                    <FooterTab>
                        <Button full>
                            <Text>Footer</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

그 다음 각 플랫폼의 index 파일을 수정합니다. (ios.index.js 또는 android.index.js)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Application from './src/Application';

AppRegistry.registerComponent('AwsomeNativeBase', () => Application);

실행하기

완성된 결과를 다음 명령을 통해서 실제 화면으로 보실 수 있습니다.

$ react-native run-ios
또는
$ react-native run-android

저작자표시 비영리 동일조건 (새창열림)