NativeBase
NativeBase는 React Native용 UI 컴포넌트 라이브러리이다.
1 | npm install native-base --save |
해당 명령어로 라이브러리를 설치한다.
1 | react-native link |
link 명령어로 라이브러리와 프로젝트를 연결한다.
설치가 잘되면 다음과같은 메세지가 나온다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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> ); } } | cs |
[NativeBase1.js]
doc사이트에 있는 간단한 예제를 실행해 보자 .
1 2 3 | import NativeBase1 from './NativeBase1'; export default NativeBase1; | cs |
[App.js]
App.js를 주석처리하고 위와 같이 코드를 변경하고 프로젝트를 실행한다.
NativeBase 컴포넌트를 이용하여 헤더, 컨텐트, 푸터를 간단하게 생성할 수 있다.
원문참조 : NativeBase
'React & React Native ' 카테고리의 다른 글
| 2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지 (0) | 2018.12.29 |
|---|---|
| 리액트네이티브 리스트 React Native FlatList Component - #1 (0) | 2018.12.29 |
| 리액트네이티브 Data 가져오기, React Native Fetching Data Fom An API (0) | 2018.12.28 |
| 리액트네이티브 아이콘 사용하기, react-native-vector-icons 사용하기 (0) | 2018.12.27 |
| 리액트네이티브 react-native-navigation V2 SideMenu #4 (0) | 2018.12.27 |
클라인STR