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
darireact navigation stack
dengan cara buka fileindex.js
yang berada difoldernavigasi
.

- Setelah itu rubah dan tambahkan code berikut.
Home: {
screen: Home,
navigationOptions: () => ({
header: null,
}),
},

- Setelah kita
Rubah
seperti code diatas, maka tampilan di aplikasiheader
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 yaituView
,Text
,StyleSheet
,Image
,StatusBar
pada fileHome.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 menggunakanconst
dan letakan di bagian atas sebelumexport default Home
. Kemudian tambahkan code berikut, StyleSheet ini berfungsi untuk mengaturUI( User Interface)
seperti mengaturwarna
,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 sebelahkanan
. Sebelum kita ngoding, kita siapkan terlebih dahuluIcon Admin
anda bisa download atau membuat sendiri untukIcon Admin
setelah memilikiIcon Admin
diharapkan dengan format.png
saja dan letakanIcon Admin
tersebut difoldersrc/assets
.

- Setelah itu Buka file
Home.js
dan buat variabel Icon_Admin diatasclass
.
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 imageIcon 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
diaplikasi android
nya.

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