HybridApp-React Native 2세대 (기능 - NativeBase Library 쉽게 스타일 적용 )

웹에서 Bootstrap처럼 UI 손쉽게 만들기 위한 라이브러리, 프로토타입때 많이 사용하는 방식

다양한 사이트가 있다. 이번 예제에서는 NativeBase 사이트를 이용하겠다.

https://docs.nativebase.io/Components.html#picker-input-headref

Components · NativeBase

type Ionicons AntDesign, Ionicons, Entypo, EvilIcons, Feather, FontAwesome, FontAwesome5, Foundation, MaterialIcons, MaterialCommunityIcons, Octicons, Roboto, rubicon-icon-font, SimpleLineIcons, Zocial Specifies icon family from IonIcons

docs.nativebase.io

https://react-native-elements.github.io/react-native-elements/

React Native Elements · Cross Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit

react-native-elements.github.io

https://www.codeinwp.com/

CodeinWP - A Hub for WordPress Freelancers, Bloggers & Creators

From web design to freelancing and from development to business, your questions are covered. CodeinWP stands for all-things-WordPress.

www.codeinwp.com

<최종 화면>

작업할 경로까지 접근하여 RN23NativeBaseLibrary init하자.

Nativebase 해당 사이트를 들어가보면 library를 install하는 방법, link 방법이 나온다.

( install 에 --save 옵션은 일괄적용을 위해 )

이제 init한 폴더로 이동하여 install 및 link 하자.

코드 작성 전에 적용이 잘됐는지 run을 하는 습관을 들이자.

원래 <Container>태그는 없다. Library가 잘 추가가 되었다면 해당 태그를 사용할 수 있을 것이다.

<실행 화면> flex:1 효과를 낼 수 있다.

가독성도 있고, 또한 영역을 쉽게 나눠주는 방법을 알아보자.

<실행 화면> 알아서 bar가 생겼다.

헤더에 title을 줘보자.

Header에 Body가 왼쪽에 약간 공백이 있는 이유는 나머지 공간에 아무것도 없기 때문이다.

왼쪽으로 붙이려면 오른쪽에 태그를 주면 된다.

footer도 꾸며보자.

옆쪽에 하나 더 FooterTab을 넣자.

다양한 버튼 및 카드에 대해 알아보자.

추가한 라이브러리에는 <Image>태그가 없다. 'react-native'에서 <Image>태그를 사용해도 되고,

아니면 <Thumbnail>을 이용하자.

( 보통 혼용하여 사용한다. 라이브러리를 추가했다고 라이브러리에 있는 것만 사용하지 않는다. )

<복붙용 코드>

Main.js

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

import React, {Component} from 'react';
import { Container, Header, Content, Footer, Left, Button, Icon, Body, Title, Right, FooterTab, Text, Card, CardItem, Thumbnail } from 'native-base';
 
export default class Main extends Component{
    render(){
        return(
            // Container: 자동 flex:1스타일이 적용된 View
            <Container>
                {/* 크게 3개 영역으로 화면 구성 */}
                <Header>
                    <Left>
                        <Button>
                            <Icon name="menu"></Icon>
                        </Button>
                    </Left>
                    <Body>
                        <Title>Native Base</Title>
                    </Body>
                    <Right>
                    </Right>
                </Header>
 
                <Content style={{padding:16}}>
                    <Button warning><Text>button</Text></Button>
                    <Button info bordered><Text>button</Text></Button>
                    <Button dark rounded><Text>button</Text></Button>
                    <Button block danger><Text>button</Text></Button>
                    <Button>
                        <Icon name="home"></Icon>
                        <Text>HOME</Text>
                    </Button>
 
                    <Card>
                        <CardItem>
                            <Thumbnail source={{uri:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfcqTBBa6h-gL4gPG7IkC7V9jHCt7lWJ8SvGdNNlRKOdbfG1SF&s"}}></Thumbnail>
                            <Text>Native base</Text>
                        </CardItem>
                        <CardItem button onPress={()=>{alert('clicked');}}>
                            <Body>
                                <Text>click on any carditem</Text>
                            </Body>
                        </CardItem>
                    </Card>
                </Content>
 
                <Footer>
                    {/* Bottom 탭 */}
                    <FooterTab>
                        <Button>
                            <Text>TAB1</Text>
                        </Button>
                    </FooterTab>
                    <FooterTab>
                        <Button>
                            <Text>TAB2</Text>
                        </Button>
                    </FooterTab>
 
                </Footer>
            </Container>
        );
    }
}
 
   
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HybridApp' 카테고리의 다른 글

HybridApp-React Native 2세대 (기능 - DataArchitecture- Context API, 전역변수 같은) (0)	2020.01.30
HybridApp-React Native 2세대 (기능 - DataArchitecture ) (0)	2020.01.30
아직 내용 수정 안함 HybridApp-React Native 2세대 (기능 - Stateful(extends),Stateless(함수형) Component) (0)	2020.01.30
HybridApp-React Native 2세대 (기능 - Map Google 라이브러리 사용 ) (0)	2020.01.29
HybridApp-React Native 2세대 (기능 - Geolocation API ) (0)	2020.01.29