Berawal dari keinginan belajar dengan React Native Gaess… saya akan kembali menulis untuk dokumentasi saya…
saya anggap teman – teman sudah insttal React Native di leptop ya..

Pertama langsung buka App.js program React Native.
Kemudian kita akan membuat Header, Tambahkan Code berikut :

import {Container, Header, Title, Button, Icon} from 'native-base';
import React, {Component} from 'react-native';
‚Äč
export default class HeaderExample extends Component {
    render() {
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name="ios-arrow-left" />
                    </Button>

                    <Title>Header</Title>

                    <Button transparent>
                        <Icon name="navicon"/>
                    </Button>
                </Header>
            </Container>
        );
    }
}

Pastikan semua tag sudah dideclarasi ya teman – teman, Seperti ( header ), kemudian bisa kalian coba run dan hasilnya sudah bisa dilihat,

Selanjutnya kita akan membuat isi Content, Teman – teman bisa tambahkan code berikut didalam Tag Container , dibawah Tag Header :

  <Content>
                    <Badge>2</Badge>
                    <Badge primary>2</Badge>
                    <Badge success>2</Badge>
                    <Badge info>2</Badge>
                    <Badge warning>2</Badge>
                    <Badge danger>2</Badge>
                </Content>

Selanjutnya kita akan membuat menu Footer Teman – teman, seperti biasa letakkan code di dalam container dibawah Tag Content ya :

<Footer>
                    <Button transparent>
                        <Icon name="ios-telephone" />
                    </Button>

                    <Title>Footer</Title>

                    <Button transparent >
                        <Icon name="chatbox" />
                    </Button>
                </Footer>

Maka Hasilnya akan seperti berikut ini :

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here