Struktur React Native dan Navigasi Lengkap
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 .