Cara Membangun Sistem Navigasi Seluler Dengan React Navigation
Table of content:
Aplikasi seluler harus memiliki sistem navigasi yang memandu pengguna dengan mudah melalui berbagai layar dan fungsi.
React Navigation, pustaka navigasi yang andal dan fleksibel untuk React Native, dapat membantu Anda menciptakan pengalaman tersebut. Dengan memanfaatkan kemampuannya, Anda dapat dengan mudah membuat sistem navigasi seluler yang hebat.
Menginstal React Navigation Library
React Navigation menawarkan tiga pola navigasi utama, yaitu navigasi Stack, Tab, dan Drawer untuk membangun sistem navigasi. Pola navigasi ini menyediakan kerangka kerja untuk mengatur dan mengelola navigasi di antara berbagai layar dalam aplikasi Anda.
Baca Juga:
Untuk mulai menggunakan React Navigation, instal pustaka dan dependensi yang diperlukan:
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
Menyiapkan Navigator
Setiap navigator dalam React Navigation tinggal di perpustakaannya sendiri yang terpisah. Untuk menggunakan salah satu navigator, Anda harus menginstalnya satu per satu.
Struktur proyek yang dipikirkan dengan baik berguna saat membangun sistem navigasi untuk aplikasi seluler Anda. Praktik yang baik adalah membuat file src folder di direktori root proyek Anda. Di dalam folder ini, Anda harus memiliki layar map. Ini akan berfungsi untuk memisahkan komponen layar Anda dari komponen lain.
Anda akan menulis kode untuk mengatur pola navigasi yang Anda gunakan di dalam proyek Anda Aplikasi.js mengajukan.
Membuat Navigator di dalam Aplikasi.js file adalah praktik terbaik karena beberapa alasan:
- Itu Aplikasi.js file biasanya merupakan komponen tingkat atas dalam aplikasi React Native. Mendefinisikan Navigator dalam file ini akan memastikan bahwa hierarki navigasi berada pada level tertinggi pohon komponen Anda dan dapat diakses seluruhnya.
- Menempatkan Navigator di Aplikasi.js file memungkinkan Anda untuk dengan mudah mengakses dan meneruskan status dan alat peraga di seluruh aplikasi ke layar di dalam navigator.
- Bereaksi Navigasi NavigationContainer menyediakan konteks yang diperlukan untuk navigasi dan biasanya terletak di dalam Aplikasi.js. Dengan menempatkan Navigator di file yang sama, Anda dapat dengan mudah mengintegrasikannya dengan NavigationContainer.
Stack Navigator
Stack Navigator adalah pola navigasi paling populer di dalam pustaka React Navigation. Ini menggunakan struktur data tumpukan di mana setiap layar adalah komponen yang sama sekali berbeda dan ditumpuk di atas yang sebelumnya.
Saat layar baru didorong ke atas tumpukan, itu menjadi layar aktif, dan layar sebelumnya terlempar di bawahnya. Ini memungkinkan pengguna untuk menavigasi bolak-balik melalui tumpukan, seperti alur navigasi situs web. Anda dapat menyiapkan navigator tumpukan untuk beralih dari satu layar ke layar lainnya.
Misalnya:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Blok kode di atas membuat komponen Stack Navigator menggunakan buatStackNavigator() dari perpustakaan navigasi.
Dalam contoh ini, Stack Navigator memiliki dua layar: Rumah Dan Detail.
Sekarang instal Stack Navigator:
npm install @react-navigation/stack
Di dalam Tampilan depanAnda dapat menggunakan navigasi objek untuk menguji Stack Navigator:
import { StyleSheet, View, Button } from "react-native";
import React from "react";const HomeScreen = ({ navigation }) => {
return (
<View>
<Button
title="Navigate to .."
onPress={() => navigation.navigate("DetailScreen")}
/>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({});
Perhatikan bagaimana Stack Navigator secara otomatis membuat tombol panah untuk menangani navigasi kembali ke layar sebelumnya.
Tab Navigator
Dalam beberapa situasi, memiliki sistem navigasi bolak-balik seperti Stack Navigator tidak memberikan pengalaman yang luar biasa. Tab Navigator lebih cocok untuk kasus ini. Ini menampilkan layar navigasi yang tersedia di muka untuk pengguna dan dapat lebih mudah digunakan, seperti bilah navigasi web.
Untuk memulai, instal @react-navigation/bottom-tabs perpustakaan menggunakan manajer paket NPM.
Dengan buatNavigator Bawah()Anda dapat membuat instance Tab Navigator seperti yang Anda lakukan dengan Stack Navigator:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';const Tab = createBottomTabNavigator();
Dan kemudian, tentukan layar yang Anda inginkan sebagai tab di dalam navigator dan NavigationContainer:
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ title: "Home" }}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{ title: "Profile" }}
/>
<Tab.Screen
name="Details"
component={DetailScreen}
options={{ title: "Details" }}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
Saat menjalankan aplikasi Anda, Anda akan melihat Tab Navigator dengan layar yang Anda tentukan di bagian bawah.
Anda bisa menggunakan tabBarPosition opilihan untuk memposisikan navigator di atas, Kanan, kiriatau dasar (bawaan).
Navigator Laci
Navigator Laci, atau laci, adalah pola navigasi umum dalam aplikasi seluler. Anda dapat membuka laci dengan menggesek atau mengetuk tombol. Ini menyebabkan laci meluncur dari sisi layar, memperlihatkan isinya.
Untuk menggunakan Drawer Navigator, instal bersama react-native-gesture-handler Dan react-native-reanimated:
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated
Anda juga perlu mengonfigurasi pengaktifan ulang di dalam babel.config.js mengajukan:
module.exports = {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
}; Berikut adalah contoh cara menyiapkan Drawer Navigator:
import "react-native-gesture-handler"; import { View, Text, Button } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
const Drawer = createDrawerNavigator();
const DrawerContent = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ fontSize: 24, fontWeight: "bold" }}>
Welcome to the Drawer
</Text>
<Text>
This is some extra content that you can display in the drawer.
</Text>
<Button title="Close Drawer" onPress={() => navigation.closeDrawer()} />
</View>
);
};
const App = () => (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <DrawerContent {...props} />}
>
{}
</Drawer.Navigator>
</NavigationContainer>
);
export default App;
Dalam contoh ini, DrawerContent komponen dilewatkan sebagai drawerContent penyangga untuk createDrawerNavigator. Di dalam DrawerContent komponen, Anda dapat menyesuaikan konten untuk menampilkan informasi yang diinginkan menggunakan komponen teks atau elemen dan gaya lainnya.
Navigator tab bersifat statis dan selalu terlihat. Ini tidak selalu yang terbaik, karena tab memblokir bagian layar dan dapat mengalihkan fokus dari layar utama. Anda dapat menggunakan laci sebagai navigator tab dinamis dan membuat menu navigasi di dalam laci. Pengguna kemudian dapat membuka laci untuk menemukan menu navigasi.
Anda juga dapat menggunakan laci untuk menampilkan konten tambahan seperti bilah pencarian, profil pengguna, informasi kontekstual, atau apa pun yang tidak memerlukan tampilan layar penuh.
Pertimbangkan praktik terbaik ini untuk mendapatkan hasil maksimal dari Drawer Navigator:
- Hindari membebani laci dengan terlalu banyak opsi dan fokuslah untuk menghadirkan fitur yang paling relevan dan sering digunakan.
- Mengkategorikan item terkait secara logis dan intuitif untuk membantu pengguna menemukan apa yang mereka cari dengan cepat.
- Gunakan ikon atau indikator visual untuk membantu pengguna memahami tujuan setiap item di dalam laci.
Melewati Data Dengan Alat Peraga Navigasi
React Navigation menyediakan mekanisme kuat yang memungkinkan Anda melewatkan data melalui alat bantu navigasi.
Pertimbangkan skenario di mana Anda memiliki daftar item di satu layar, dan saat pengguna memilih item, Anda ingin meneruskan data terkait ke layar lain.
Pertama, Anda perlu menentukan struktur navigasi Anda. Sekarang, untuk mengirimkan data dari Tampilan depan ke a Layar Detail ketika item dipilih, di dalam Tampilan depan tentukan fungsi yang menangani navigasi dan menyertakan data yang ingin Anda lewati.
import React from 'react';
import { View, Text, Button } from 'react-native';const HomeScreen = ({ navigation }) => {
const handleItemPress = (item) => {
navigation.navigate('DetailScreen', { item });
};
return (
<View>
<Text>List of Items</Text>
<Button title="Item 1" onPress={() => handleItemPress('Item 1 Data')} />
<Button title="Item 2" onPress={() => handleItemPress('Item 2 Data')} />
</View>
);
};
export default HomeScreen;
Itu handleItemPress fungsi memanfaatkan navigasi.navigate metode untuk menavigasi ke Layar Detail sambil meneruskan data item yang dipilih sebagai parameter dalam argumen kedua.
Untuk dapat mengakses data yang dikirimkan di dalam Layar Detail komponen, Anda akan memerlukan navigasi menopang:
import React from 'react';
import { View, Text } from 'react-native';const DetailScreen = ({ navigation }) => {
const item = navigation.getParam('item', '');
return (
<View>
<Text>Detail Screen</Text>
<Text>{item}</Text>
</View>
);
};
export default DetailScreen;
Di sini, Layar Detail kegunaan komponen navigasi.getParam untuk mengambil item yang diteruskan dari alat bantu navigasi. Dalam contoh ini, nilai default string kosong ditetapkan jika data tidak tersedia. Dengan cara ini, aplikasi Anda tidak akan mogok saat rendering.
Bergantung pada kerumitan aplikasi, Anda dapat menjelajah menggunakan pustaka pengelolaan negara seperti Redux atau API konteks untuk mengelola dan berbagi data secara global.
Mengatur Kode Navigasi Anda
Mengatur kode navigasi Anda dengan benar akan membantu Anda membangun aplikasi React Native yang skalabel dan kolaboratif. Anda dapat melakukannya dengan memecah logika navigasi menjadi modul yang dapat dikelola. Ini akan membuatnya mudah dibaca dan dipahami.
Dengan ini, Anda dapat memastikan untuk membuat navigasi yang mulus bagi pengguna Anda sambil menikmati pengalaman pengembangan.
Artikel Terkait
