Struktur React Native dan Navigasi Lengkap

R. Zegveld F
6 min readJul 16, 2021

Diantara beberapa komponen Esensial untuk membuat aplikasi adalah Navigasi .

Navigasi merupakan cara agar halaman terhubung dengan halaman yang lain , seperti hal nya kita membuat link pada website . Navigasi bisa kita gunakan pada tombol button , picture , swipe atau yang lainnya , dan ini mendukung penggunaan button pada hardware kita .

Kita akan memilih React Navigation V5 saat ini .

Baiklah , untuk memulai kita gunakan React Navigation Stack , React Navigation Drawer dan React Navigation Bottom Tabs

Disini penulis akan menggunakan Expo CLI , VSCode sebagai IDE , Function Component dan React Navigation.

Persiapan Libraries

$ npm install @react-navigation/native$ npm install @react-navigation/stack

Untuk mendukung Navigator install juga Libraries berikut

$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view$ npm install @react-navigation/drawer$ npm install @react-navigation/bottom-tabs

Struktur kode

Sebentar lagi kita akan memulai bagaimana React Navigation bekerja , ada baiknya kita gunakan map sebagai overview .

React Navigation bekerja layaknya pohon dengan berbagai ranting .

Anda harus menyambung tiap ranting untuk tetap berada pada batang pohon utama yang kokoh .

App.js

App.js merupakan kode yang pertama kali akan di eksekusi . Mari kita membuat nya sebagai Entry point dengan Nested Navigator yang di wrap

import React from ‘react’import { Provider } from ‘react-native-paper’import RootNavigator from ‘./src/navigation/RootNavigator’import { theme } from ‘./src/core/theme’export default function App() {return (<Provider theme={theme}><RootNavigator /></Provider>);}

RootNavigator.js

Berfungsi sebagai index , perantara dari Stack Navigator , Drawer dan Bottom Tabs yang akan kita buat .

import React from ‘react’import { NavigationContainer } from ‘@react-navigation/native’import MainTabs from ‘./MainTabs’import DrawerStack from ‘./DrawerStack’export default function RootNavigator() {return (<NavigationContainer><DrawerStack /></NavigationContainer>)}

MainTabs.js

import React from “react”;import { createBottomTabNavigator } from “@react-navigation/bottom-tabs”import { AntDesign } from ‘@expo/vector-icons’import HomeStack from ‘./HomeStack’import Home from “../screens/Home”import About from “../screens/About”const Tab = createBottomTabNavigator();export default function MainTabs() {return (<Tab.NavigatorscreenOptions={({ route }) => ({headerShown: false,tabBarIcon: ({ size }) => {let iconName;if (route.name === ‘Feed’) {iconName = ‘book’;}if (route.name === ‘Library’) {iconName = ‘home’;}if (route.name === ‘Profile’) {iconName = ‘setting’;}return <AntDesign name={iconName} size={size} />;},})}><Tab.Screen name=’Feed’ component={About} /><Tab.Screen name=’Library’ component={Home} /><Tab.Screen name=’Profile’ component={HomeStack} /></Tab.Navigator>);}

Lihat kode diatas , ini akan membuat Bottom Bar , gunakan komponen <Tab.Screen name= ‘ ‘ /> , yang akan membuat 3 halaman dibawah yang dapat di klik .

HomeStack.js

import React from “react”import { createStackNavigator } from “@react-navigation/stack”import StartScreen from “../screens/StartScreen”import Dashboard from “../screens/Dashboard”import Home from “../screens/Home”import About from “../screens/About”import DrawerFirstPage from “../screens/DrawerFirstPage”import DrawerSecondPage from “../screens/DrawerSecondPage”const Stack = createStackNavigator();export default function HomeStack() {return (<Stack.NavigatorinitialRouteName=”StartScreen”screenOptions={{headerShown: true,}}><Stack.Screen name=”StartScreen” component={StartScreen} /><Stack.Screen name=”Dashboard” component={Dashboard} /><Stack.Screen name=”Home” component={Home}/><Stack.Screen name=”About” component={About}/><Stack.Screen name=”DrawerFirstPage” component={DrawerFirstPage}/><Stack.Screen name=”DrawerSecondPage” component={DrawerSecondPage}/></Stack.Navigator>);}

StackNavigator

Lihat pada Bagian <Stack.Screen name= ‘ ‘ /> ini akan menghubungkan Page satu dengan lainnya , ini merupakan bagian inti dari navigasi .

Kode yang ada disini menghubungkan halaman satu pada yang lainnya , kita akan membuat halaman nya dibagian bawah nanti .

Penting ! “Pastikan anda menghubungkannya pada Stack Navigator untuk setiap halaman yang dituju .

Jika tidak , redirect atau navigasi tidak akan berfungsi .”

DrawerStack.js

import React from ‘react’import {createDrawerNavigator} from ‘@react-navigation/drawer’import HomeStack from ‘./HomeStack’import MainTabs from ‘./MainTabs’import DrawerFirstPage from ‘../screens/DrawerFirstPage’import DrawerSecondPage from ‘../screens/DrawerSecondPage’const Drawer = createDrawerNavigator()export default function DrawerStack() {return(<Drawer.Navigator><Drawer.Screen name=”MainTabs” component={MainTabs}/><Drawer.Screen name=”DrawerFirstPage” component={DrawerFirstPage}/><Drawer.Screen name=”DrawerSecondPage” component={DrawerSecondPage}/></Drawer.Navigator>)}

Drawer Stack Digunakan untuk membuat Sidebar , lihat komponen <Drawer.Screen name= ‘ ‘ />

Components kode yang perlu diingat dari React Navigation adalah :

<Stack.Screen /> , Untuk Navigasi Halaman.

<Drawer.Screen /> , Untuk membuat Sidebar . (Anda mungkin perlu men-swipe nya sebelah pojok kiri)

<Tab.Screen /> , Untuk membuat Bottom Bar .

Setelah anda memahami cara kerja React Navigation , sekarang mari membuat halaman .

Buatlah direktori screens yang berisi halaman — halaman berikut

StartScreen.js

import React from ‘react’import Background from ‘../components/Background’import Logo from ‘../components/Logo’import Header from ‘../components/Header’import Button from ‘../components/Button’import Paragraph from ‘../components/Paragraph’export default function StartScreen({ navigation }) {return (<Background><Logo /><Header>Prototype Navigation</Header><Paragraph>We Learn A Lot</Paragraph><Buttonmode=”contained”onPress={() => navigation.navigate(‘Dashboard’)}>Go To Dashboard</Button></Background>)}

Home.js

import React from ‘react’import Background from ‘../components/Background’import Logo from ‘../components/Logo’import Header from ‘../components/Header’import Button from ‘../components/Button’import Paragraph from ‘../components/Paragraph’export default function Home({ navigation }) {return (<Background><Logo /><Header>Library is Under Construction </Header><Paragraph>Back Again Soon</Paragraph><Buttonmode=”outlined”onPress={() => navigation.navigate(‘StartScreen’)}>Back to StartScreen</Button></Background>)}

DrawerFirstPage.js

import React from ‘react’import Background from ‘../components/Background’import Logo from ‘../components/Logo’import Header from ‘../components/Header’export default function DrawerFirstPage({ navigation }) {return (<Background><Logo /><Header>Drawer 1st Page </Header></Background>)}

DrawerSecondPage.js

import React from ‘react’import Background from ‘../components/Background’import Logo from ‘../components/Logo’import Header from ‘../components/Header’export default function DrawerSecondPage({ navigation }) {return (<Background><Logo /><Header>Drawer 2nd Page </Header></Background>)}

Dashboard.js

import React from ‘react’import Background from ‘../components/Background’import Logo from ‘../components/Logo’import Header from ‘../components/Header’import Button from ‘../components/Button’import Paragraph from ‘../components/Paragraph’export default function Dashboard({ navigation }) {return (<Background><Logo /><Header>Congratulations !</Header><Paragraph>You’re on Dashboard</Paragraph><Buttonmode=”contained”onPress={() => navigation.navigate(‘StartScreen’)}>Back to Homescreen</Button></Background>)}

About.js

import React from ‘react’import Background from ‘../components/Background’import Logo from ‘../components/Logo’import Header from ‘../components/Header’import Button from ‘../components/Button’export default function About({ navigation }) {return (<Background><Logo /><Header>Under Construction Page</Header><Buttonmode=”outlined”onPress={() => navigation.navigate(‘LoginScreen’)}>Back to StartScreen</Button></Background>)}

Index.js

export { default as StartScreen } from ‘./StartScreen’export { default as Dashboard } from ‘./Dashboard’export { default as Home } from ‘./Home’export { default as About } from ‘./About’export { default as DrawerFirstPage } from ‘./DrawerFirstPage’export { default as DrawerSecondPage } from ‘./DrawerSecondPage’

Untuk pelengkap tambahkan index agar export dan import tidak terganggu pada rutenya .

Jika sudah , maka hasilnya akan seperti ini

Seperti biasa jika kesulitan dalam melakukan praktiksi , maka Source code nya ada dibawah ini .

[Source]

Terima kasih karena telah sampai disini , selamat belajar dan berjuang lah , semoga bermanfaat .

Sign up to discover human stories that deepen your understanding of the world.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

R. Zegveld F
R. Zegveld F

Written by R. Zegveld F

2:AM LoFi Writer on Radkai Tech ⚡|| Fullstack Dev turned AI Engineer 🤖 || Data Trainer on Opentrain and Outlier AI

No responses yet

Write a response