Membuat Aplikasi Android Sistem Informasi DesaKu - Part 6
Aplikasi Android Sistem Informasi Desaku ini merupakan tutorial Part 6, jadi jika anda belum mengikuti Part 5 diharapkan anda untuk mengikuti tutorial Part 5 terlebih dahulu untuk memudahkan anda dalam memahami tutorial Part 6 ini.
Pada Part 5 kita telah menginstall React Navigation
dan sekarang kita akan mengimplementasikan React Navigation
pada project React Native
kita yaitu DesaKu
.
- Buka Project DesaKu dengan
Visual Studio Code

- Setelah itu kita buat folder baru dengan nama
src
, untuk membuat nya dengan cara klik kanan dibagianbawah kosong
kemudian kliknew folder
.

- Setelah itu berikan nama folder nya
src
kemudian tekanEnter

Kemudian buat folder 3 folder baru yaitu assets
, screen
dan navigasi
didalam folder src
.
- Folder
assets
difungsikan untuk menampung gambar/icon. - Folder
screen
difungsikan untuk menampung file - file component JavaScript. - Folder
navigasi
difungsikan untuk mengrouting antara file component 1 ke file componet lainya.
Cara membuat folder baru di dalam folder src
dengan cara klik kanan
pada folder src
dan Klik New Folder
.

- Kita Membuat Folder
assets

- Kita Membuat Folder
screen

- Kita Membuat Folder
navigasi

Setelah anda mengikuti pembuatan tiga folder tersebut yaitu folder assets
, screen
, dan navigasi
maka anda akan melihat ada tiga folder yang ada didalam folder src
seperti berikut ini.

- Setelah kita selesai membuat ketiga folder tersebut, maka sekarang kita membuat
File beberapa Javascript
didalam folderscreen
. Berikut nama - nama File Javascript yang akan kita buat yaituHome.js
,Daftar_DesaKu.js
,Suara_DesaKu.js
,Wisata_DesaKu.js
,Artikel_DesaKu.js
danAdmin_DesaKu.js
. - Untuk cara pembuatan file tersebut dengan cara `Klik Kanan pada Folder
screen
kemudianKlik New File
setelah itu masukanNama File
. Tanda ini.js
merupakan tanda bahwa file tersebut merupakan File JavaScript.

- Selanjutnya Masukan
Nama File
sesuainama file
pada langkah sebelumnya dan ulangi proses pembuatan untuk membuat file lainya.

- Jika semua file telah selesai dibuat, maka hasil seperti berikut.

- Sekarang setiap
File Javascript
yang kita buat tadimasukan kode
berikut.
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native'
class NamaClass extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View>
<Text>NamaClass</Text>
</View>
);
}
}
export default NamaClass;
Keterangan:
- NamaClass diganti sesuai dengan
Nama File JavaScript
- Berikut Untuk File
Home.js

- Berikut Untuk File
Daftar_DesaKu.js

- Berikut Untuk File
Suara_DesaKu.js

- Berikut Untuk File
Wisata_DesaKu.js

- Berikut Untuk File
Artikel_DesaKu.js

- Berikut Untuk File
Admin_DesaKu.js

- Kemudian setelah selesai, sekarang kita buat File
index.js
didalam foldernavigasi
. Masukan/Import Package React Navigation
berikut kedalam fileindex.js
didalam foldernavigasi
import {createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
Masukan/Import File Componet Javascript
yang telah kita buat didalam folderscreen
, letakan code ini dibawah code sebelumnya.
import Home from '../screen/Home'
import Admin_DesaKu from '../screen/Admin_DesaKu'
import Artikel_DesaKU from '../screen/Artikel_DesaKU'
import Daftar_DesaKu from '../screen/Daftar_DesaKu'
import Suara_DesaKu from '../screen/Suara_DesaKu'
import Wisata_DesaKu from '../screen/Wisata_DesaKu'
- Membuat sebuah Variabel menggunakan
const
dengan nama variabelAuthStackNavigator
dan Nilai menggunakan functioncreateStackNavigator()
kemudian untukparamenter
menggunakanobjek
yang memilikikey
danvalue
dariNama Import
Dari File Componet Javascript.
const AuthStackNavigator = createStackNavigator({
Home : Home,
Admin_DesaKu : Admin_DesaKu,
Artikel_DesaKU : Artikel_DesaKU,
Daftar_DesaKu : Daftar_DesaKu,
Suara_DesaKu : Suara_DesaKu,
Wisata_DesaKu : Wisata_DesaKu
})
- Kemudian jangan lupa variabel
AuthStackNavigator
di export agar fileindex.js
ini dapat dijalankan di file lain.
export default createAppContainer(AuthStackNavigator)
- Berikut Code Lengkapnya
import {createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import Home from '../screen/Home'
import Admin_DesaKu from '../screen/Admin_DesaKu'
import Artikel_DesaKU from '../screen/Artikel_DesaKU'
import Daftar_DesaKu from '../screen/Daftar_DesaKu'
import Suara_DesaKu from '../screen/Suara_DesaKu'
import Wisata_DesaKu from '../screen/Wisata_DesaKu'
const AuthStackNavigator = createStackNavigator({
Home : Home,
Admin_DesaKu : Admin_DesaKu,
Artikel_DesaKU : Artikel_DesaKU,
Daftar_DesaKu : Daftar_DesaKu,
Suara_DesaKu : Suara_DesaKu,
Wisata_DesaKu : Wisata_DesaKu
})
export default createAppContainer(AuthStackNavigator)
Berikut Penjelasan Insyaallah Cukup Jelas. Semoga mudah dipahami.

Jangan Lupa disimpan code yang kita tambahkan pada file index.js
di folder navigasi
.
- Sekarang Agar file
index.js
yang ada di foldernavigasi
dijalankan diaplikasi kita. Caranya ada kita Masuk ke Fileindex.js
yang berada diroot project dilihat digambar danHapus semua code
yang ada di Fileindex.js
tersebut setelah itu ganti dengan code berikuti ini.
import {AppRegistry} from 'react-native';
import Navigasi from './src/navigasi'
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Navigasi);

- Sekarang anda hapus file
App.js
berikut ini.

- Sekarang silakan anda jalankan
Server Debug
jika anda lupa silkan baca lagi Tutorial Part4. Dan jika tidakerror
maka tampil seperti berikut.

Demkian Tutorial Part 6, selanjutnya ikuti juga tutorial Part 7.