React Native webbaliseo

Belajar drawer dan stack untuk navigasi di React Native dengan EXPO di Android

Pada kesempatan ini saya akan berbagi pengalaman saya dalam membuat menu navigasi dengan drawer dan stack, drawer dan stack merupakan salah satu bagian komponen dari react native. sistem operasi yang saya gunakan windows 10.

Asumsi saya semuanya sudah mempunyai tool-tool yang akan dipergunakan dalam project react native dengan expo kita ini jika belum anda bisa baca disini.

Ok kita langsung buat project baru lewat command prompt, klik start lalu ketik cmd lalu klik open

untuk nama projectnya boleh bebas, saya disini mengunakan nama belajardrawer, ketikan perintah “expo init belajardrawer” di comand prompt.

lalu pilih blank lalu tekan enter, biarkan proses instalasi sampai selesai jika sukses maka akan muncul seperti ini

jika berhasil, masuk kedalam projek kita karena saya membuat projeknya tadi di C:\Users\[nama user anda di komputer]> maka untuk masuk ke projek kita ketikan perintah “cd belajardrawer” jadi bentuknya jadi seperti ini C:\Users\[nama user anda di komputer]>cd belajardrawer setelah masuk akan terlihat seperti ini C:\Users\[nama user anda di komputer]\belajardrawer> lalu jalankan projek kita, karena saya menggunakan expo dengan perintahnya “npm start” jadi seperti ini C:\Users\[nama user anda di komputer]\belajardrawer>npm start

Jika berhasil tanpa error akan kelihatan seperti ini

Saya asumsikan anda sudah menginstal expo client di handphone android anda jika belum silahkan download expo client di google playstore dan instal, kemudian dari hp android anda jalankan expo client seperti gambar ini

dan klik Scan QR Code lalu scan QR Code yang kelihatan di command prompt diatas, jika berhasil tanpa error maka di hp android akan kelihatan seperti gambar ini

SELAMAT KITA SUDAH BERHASIL MEMBUAT PROJECT BARU DI REACT NATIVE.

SELANJUTANYA Kita akan melakukan proses edit di file app.js, buka editor anda bisa menggunakan notepad, notepad++ atau visual studio code, kebetulan saya menggunkan visual studio code dan buka folder project kita yang berada di C:/Users / [nama user anda di komputer] / belajardrawer seperti gambar di bawah ini

Untuk menggunakan komponen drawer, kita harus menginstal melalui command prompt lalu ketikan perintah “npm install @react-navigation/drawer” jadinya kayak gini C:\Users\[nama user anda di komputer]\belajardrawer>npm install @react-navigation/drawer

lalu tekan enter, biarkan proses instalasi sampai selesai jika sukses akan tampak seperti ini

Setelah instalasi berhasil, saatnya menggunakan dalam kode kita, buka file app.js yang ada di folder project kita di C:/Users / [nama user anda di komputer] / belajardrawer

Lalu hapus semua isi kode di app.js dan paste kode dibawah ini lalu save

import * as React from ‘react’;
import { Button, View } from ‘react-native’;
import { createDrawerNavigator } from ‘@react-navigation/drawer’;
import { NavigationContainer } from ‘@react-navigation/native’;

 

function HomePageScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
      <Button
        onPress={() => navigation.navigate(‘Category’)}
        title=”Go To Category”
      />
    </View>
  );
}

 

function CategoryScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
      <Button onPress={() => navigation.goBack()} title=”Go back homepage” />
    </View>
  );
}

 

const Drawer = createDrawerNavigator();

 

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName=”Home”>
        <Drawer.Screen name=”HomePage” component={HomePageScreen} />
        <Drawer.Screen name=”Category” component={CategoryScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
 
 
setelah itu kita jalankan kodenya dengan buka command prompt lalu masuk ke project kita C:\Users\[nama user anda di komputer]\cd belajardrawer> lalu ketik npm start jadinya kayak gini
C:\Users\[nama user anda di komputer]\belajardrawer>npm start
lalu enter akan muncul QR seperti ini
 
buka aplikasi expo di hp kita lalu scan code QR tersebut, kalau tidak ada error akan kelihatan seperti ini di hp kita, silahkan di cek semua menu navigasinya.
 
 
Sekian tutorial react native pembuatan menu navigasi dengan drawer dan stack, terima kasih
 
 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *