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.

• Setelah itu rubah dan tambahkan code berikut.

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

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

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'

• 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>

• 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

• Berikut Tampilan di Aplikasi dari Code Header diatas.

• 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 .

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

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

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

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

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

img_style:{
    height: 30,
    width:30
  }

• 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

• Dan ini tampilan di aplikasi android nya.

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