Membuat Aplikasi Android Sistem Informasi DesaKu - Part 8
Aplikasi Android Sistem Informasi Desaku ini merupakan Tutorial Part 8, jadi jika anda belum mengikuti Tutorial Part 7 diharapkan anda untuk mengikuti Tutorial Part 7 terlebih dahulu untuk memudahkan anda dalam memahami Tutorial Part 8 ini.
Pada Tutorial Part 7 kita telah membuat Header Pada File Home
, sekarang kita akan melanjutkan penambahan fitut pada File Home
yaitu kita akan nambahkan galeri gambar dalam bentuk slide dibagian bawah setelah Header
di File Home
.
Dalam membuat Galeri Gambar Slide
tersebut kita perlu sebuah library react-native-slideshow
. library ini berfungsi untuk menampilkan galeri gambar berupa bentuk slide dengan cepat dan mudah untuk react native. Anda bisa lihat di Sini untuk lebih detailnya.
Menginstall react-native-slideshow
- Buka terminal anda dan jalankan perintah berikut untuk menginstall
react-native-slideshow
dan tunggu hingga proses instalasi selesai.
sudo npm install --save react-native-slideshow

- Setelah selesai menginstal library
react-native-slideshow
, kita perlu menginstal modulprop-types
. Untuk menginstalprop-types
di projectreact native
kita yaituDesaKu
cukup menjalankan perintah berikut ini.
sudo npm install --save prop-types

- Jika proses install modul
prop-types
selesai, ada beberapa yang perlu kita setting atau merubah code pada fileSlideshow.js
. Untuk FileSlideshow.js
ini terletak didalam folderDesaKu-> node_modules -> react-native-slideshow -> Slideshow.js
. - Klik Folder
node_modules
dan cari folderreact-native-slideshow
.

- Setelah ketemu folder
react-native-slideshow
, sekarang buka fileSlideshow.js
kemudian hapusprop-types
dari import react.

- Kemudian Tambahkan code berikut ini, fungsinya untuk mengimport
PropTypes
dari libraryreact-native-slideshow
yang tadi kita install.

- Sekarang buka file
Home
dan tambahkan code berikut ini.
import Slideshow from 'react-native-slideshow';

- Kemudian Tambahkan Code ini didalam class.
constructor (props) {
super(props)
this.state = {
position: 1,
interval: null,
dataSource: [
{
title: 'Matahari Terbit Pantai Samas',
caption: 'Pandang Yang Indah',
url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-38-35.jpg?raw=true',
}, {
title: 'Ombak Pantai Samas',
caption: 'Ombak Yang Membuat Tegang',
url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-01.jpg?raw=true',
}, {
title: 'Bersepeda dan Beristirahat',
caption: 'Gegunung Krete Bantul Yogyakarta',
url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-06.jpg?raw=true',
},
],
};
}

- Untuk
dataSource
anda bisa nambahkan dengan mengikuti format code yang sudah ada.

- Jika ingin menambahkan gambar yang akan ditampilan dalam bentuk galeri slide, caranya seperti berikut ini.

- Setelah anda selesai menambahkan gambar pada
dataSource
, sekarang berikat jeda waktu perpindahan dari gambar 1 ke gambar selanjutnya dengan nambahkan code berikut ini, untuk lebih jelas perhatikan gambar.
componentWillMount() {
this.setState({
interval: setInterval(() => {
this.setState({
position: this.state.position === this.state.dataSource.length ? 0 : this.state.position + 1
});
}, 5000)
});
}

- Kemudian tambahkan juga code berikut setelah-nya
componentWillUnmount() {
clearInterval(this.state.interval);
}

- Setelah beberapa code diatas kita tambahkan sekarang kita tambahkan code ini ke
return
agar code - code yang kita tulisan sebelumnya tadi bisarender
untuk ditampilkan di aplikasi androidnya.
<Slideshow
dataSource={this.state.dataSource}
position={this.state.position}
onPositionChanged={position => this.setState({ position })}
/>
- Untuk posisi letak code nya bisa anda lihat di gambar bawah ini.

- Sekarang kita jalankan
Server Debug
, anda bisa lihat di Toturial Part 4
npm start
- Maka akan Tampil
Galeri Slide
nya seperti ini

- Untuk menghilangkan
Warnning
tambahkan code berikut ini seperti digambar.

- Setelah itu tidak ada lagi
Warnning

Demikian untuk Tutorial Part 8
ini, jangan lupa ikuti pembahasan materi selanjutnya di Tutorial Part 9