Membuat Aplikasi Android Sistem Informasi DesaKu - Part 7

Aplikasi Android Sistem Informasi Desaku ini merupakan tutorial Part 7, jadi jika anda belum mengikuti Part 6 diharapkan anda untuk mengikuti tutorial  Part 6 terlebih dahulu untuk memudahkan anda dalam memahami tutorial Part 7 ini.

Pada  Tutorial Part 6 kita telah melakukan pembuatan File Screen Component dan pengimplementasian React Navigation . Pada Tutorial Part 7 kita akan membuat header dan menginstall dan menggunakan react-native-slideshow.

react-native-slideshow sebuah library untu menampilkan gambar dalam bentuk slide untuk berganti gambar selanjutkan dengan jeda waktu tertentu. Baiklah mari kita awali Tutorial Part 7 ini dengan membuat Header di File Home.js yang berada difolder screen.

Menambahkan Header di Screen Home

• Sebelum kita hide dulu header default dari react navigation stack dengan cara buka file index.js yang berada difolder navigasi.

index.js difolder navigasi

• Setelah itu rubah dan tambahkan code berikut.

Home: {
    	screen: Home,
    	 navigationOptions: () => ({
                header: null,
              }),
    },

Rubah dan Tambahkan Code

Rubah dan Tambahkan Code

• Setelah kita Rubah seperti code diatas, maka tampilan di aplikasi header nya sudah tidak ada lagi.

Header Telah di Hide

Sekarang kita akan membuat header untuk file Home , maka dari itu ikuti langkah - langkah berikut ini.

• Mengmasukan Component - Component React Native yang kita butuhkan yaitu View, Text, StyleSheet, Image, StatusBar pada file Home.js

import {
    View,
    Text,
    StyleSheet,
    Image,
    StatusBar
} from 'react-native'

Import Component React Native

• Kemudian ganti code didalam retrun() dengan code berikut.

<View style={styles.Container}>
     <StatusBar backgroundColor='#009688'/>
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
        </View>
</View>

Code didalam return

• Setelah itu buat variabel styles dengan menggunakan const dan letakan di bagian atas sebelum export default Home. Kemudian tambahkan code berikut, StyleSheet ini berfungsi untuk mengatur UI( User Interface) seperti mengatur warna , ukuran text, image dll.

const styles = StyleSheet.create({
  Container: {
      flex:1
  },
  MainContainer: {
    flexDirection:'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical:'center',
    marginLeft:5
  },
})

• Berikut Code lengkap Header.

import React, {Component} from 'react'
import {
    View, 
    Text, 
    StyleSheet, 
    Image, 
    StatusBar
} from 'react-native'

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  render () {
    return (
      <View style={styles.Container}>
        <StatusBar backgroundColor='#009688'/>
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  Container: {
      flex:1
  },
  MainContainer: {
    flexDirection:'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical:'center',
    marginLeft:5
  },
})

export default Home

Code Lengkap Header

Code Lengkap Header

• Berikut Tampilan di Aplikasi dari Code Header diatas.

Tampilan Hasil Code Header

• Sekarang kita akan menambahkan Icon Admin pada header di sebelah kanan. Sebelum kita ngoding, kita siapkan terlebih dahulu Icon Admin anda bisa download atau membuat sendiri untuk Icon Admin setelah memiliki Icon Admin diharapkan dengan format .png saja dan letakan Icon Admin tersebut difolder src/assets .

Icon Admin

• Setelah itu Buka file Home.js dan buat variabel Icon_Admin diatas class.

const Icon_Admin = require('../assets/icon_admin.png')

Variable Icon Admin

Variable Icon Admin

• Kemudian Tambahkan code berikut ini di dalam return() .

<Image source={Icon_Admin} style={styles.img_style}/>

Menampilkan Image

• Dan tambahkan juga code pada styles untuk mengatur tinggi dan lebar image Icon Admin nya.

img_style:{
    height: 30,
    width:30
  }

Mengatur Tinggi dan Lebar Image 

Code Header

• Ini Code Header Lengkap

import React, {Component} from 'react'
import {
    View, 
    Text, 
    StyleSheet, 
    Image, 
    StatusBar
} from 'react-native'

const Icon_Admin = require('../assets/icon_admin.png')

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  render () {
    return (
      <View style={styles.Container}>
        <StatusBar backgroundColor='#009688'/>
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
          <Image source={Icon_Admin} style={styles.img_style}/>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  Container: {
      flex:1
  },
  MainContainer: {
    flexDirection:'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical:'center',
    marginLeft:5
  },
  img_style:{
    height: 30,
    width:30
  }
})

export default Home

Code Lengkap Header

• Dan ini tampilan di aplikasi android nya.

Tampilan UI Header Dengan Icon Admin

Demikan untuk Tutorial Part 7 jangan lupa untuk mengikuti Tutorial Part 8

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 12 Desember 2019.