728x90
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
반응형
'Language' 카테고리의 다른 글
| [ReactJS] ReactJS + Nginx + Docker 구성하기 (0) | 2017.04.24 |
|---|---|
| [ReactJS] React Router 사용하기 (0) | 2017.04.05 |
| [React Native] React Native 시작하기 (iOS) (0) | 2017.03.28 |
| [React JS] React JS 시작하기 (0) | 2017.03.28 |
| [JavaScript] Chrome(또는 IE)에서 뒤로가기 버튼 방지하기 (3) | 2017.03.26 |
