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.Navigator
screenOptions={({ 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.Navigator
initialRouteName=”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>
<Button
mode=”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>
<Button
mode=”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>
<Button
mode=”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>
<Button
mode=”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 .