Cara Menavigasi Antar Layar di React Native App

Seringkali, saat membuat aplikasi React Native, Anda akan membuatnya dari layar yang berbeda seperti Login, Home, dan About. Anda kemudian harus menerapkan mekanisme navigasi sehingga pengguna Anda dapat menavigasi aplikasi dan mengakses layarnya masing-masing dalam urutan yang benar.

Tujuan dari tutorial ini adalah untuk memandu Anda melalui proses pengaturan sistem navigasi di aplikasi React Native Anda. Ini termasuk menginstal pustaka, menambahkan layar Anda ke navigator tumpukan, dan menyambungkan layar dari dalam setiap komponen Anda.

Sebelum kamu memlai

Untuk mengikuti tutorial ini di komputer lokal Anda, Anda harus menginstal yang berikut ini:

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Untuk petunjuk langkah demi langkah tentang cara menyiapkan lingkungan pengembangan React Native, Anda dapat membaca Bereaksi Asli resmi dokumentasi pengaturan.

Sebelum Anda mulai melihat cara mengimplementasikan navigasi di aplikasi React Native kami, mari pahami cara kerja mekanisme navigasi stack di React Native.

Memahami Cara Kerja Navigasi Tumpukan

Bayangkan aplikasi React Native Anda adalah tumpukan. Awalnya, di tumpukan itu, Anda punya Rumahyang merupakan layar pertama yang ditampilkan saat Anda membuka aplikasi.

Jika Anda menavigasi ke Tentang layar dari Rumah layar, aplikasi akan mendorong Tentang ke tumpukan, sehingga berada di atas Rumah. Demikian pula, aplikasi mendorong setiap layar baru yang Anda navigasikan ke tumpukan.

Sekarang, jika Anda ingin kembali ke layar sebelumnya, aplikasi akan memunculkan layar Anda saat ini dari tumpukan dan menampilkan layar di bawahnya. Perilaku ini serupa dengan yang terjadi saat Anda mengeklik ikon “kembali” di peramban web.

Dengan pemahaman yang jelas tentang mekanisme navigasi stack, sekarang saatnya untuk mengaturnya di aplikasi React Native.

1. Instal React Navigation untuk Native Apps

Untuk memulai, instal Bereaksi paket navigasi untuk aplikasi asli di proyek React Native Anda dengan menjalankan perintah ini di terminal:

npm i @react-navigation/native

Paket yang baru saja Anda instal membutuhkan Bereaksi Tumpukan Asli Dan Bereaksi Layar Asli untuk berjalan dengan benar. Untuk menginstal RN Stack, jalankan:

npm i @react-navigation/native-stack

Untuk menginstal yang kedua, jalankan ini:

npm i react-native-screens

Sekarang Anda memiliki semua yang Anda butuhkan untuk mulai membuat mekanisme navigasi di aplikasi Anda. Langkah selanjutnya adalah mengatur layar.

2. Atur Layar di Aplikasi React Native Anda

Untuk contoh ini, kami hanya akan membuat dua layar — layar utama dan layar tentang.

Buat folder bernama layar di dalam direktori root aplikasi Anda. Setelah itu, buat dua file bernama HomeScreen.js dan AboutScreen.js di dalam direktori layar.

Apa yang Harus Ditambahkan ke File HomeScreen.js Anda

Buka file HomeScreen.js dan mulai dengan mengimpor berikut ini:

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useState } from 'react'

Selanjutnya, buat komponen fungsional HomeScreen dan akses objek navigasi menggunakan dekonstruksi objek (sesuai praktik terbaik React), lalu kembalikan judul dan tombol untuk menavigasi ke layar tentang:

export default function HomeScreen({navigation}) { 
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> Home Screen </Text> 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen')} 
      /> 
    </View> 
  );
}

Di sini kami memberi tahu React Native untuk menavigasi Tentang ketika pengguna menekan tombol. Dalam hal ini, kami tidak mengirimkan data apa pun ke layar. Tapi misalkan Anda ingin meneruskan data ke fungsi; inilah cara Anda melakukannya:

export default function HomeScreen({navigation}) { 
  const data = { websiteName: "John's Tech" }

return (
<View style={styles.container}>

<Button
title=“Go to About”
onPress={() => navigation.navigate(‘AboutScreen’, data)}
/>
</View>
);
}

Sekarang saat Anda menekan tombol, kode ini meneruskan data ke layar berikutnya, Tentang. Di dalam AboutScreen.js file, Anda dapat mengakses data dari rute dan menampilkannya di UI.

Apa yang Harus Ditambahkan ke File AboutScreen.js Anda

Buka file AboutScreen.js dan mulai dengan mengimpor dependensi berikut:

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

Selanjutnya, buat Tentang Layar komponen fungsional yang mengambil data dari route.params properti dan mengembalikan data di UI:

export default function AboutScreen({route}) { 
  let dataObj = route.params

return (
<View style={styles.container}>
<Text style={styles.paragraph}>
This is the About Screen of {dataObj.websiteName}
</Text>
</View>
);
}

Jika Anda ingat, kami menentukan satu properti di objek data bernama namasitusyang sekarang kita render di dalam komponen. Anda dapat menambahkan properti sebanyak yang Anda inginkan di objek, dan mengaksesnya di dalam komponen layar target.

Langkah selanjutnya adalah menyiapkan navigator tumpukan kami dengan dua layar.

3. Menghubungkan Layar Dengan Stack Navigator

Di dalam App.js, mulailah dengan mengimpor dependensi berikut:

import * as React from 'react';
import HomeScreen from './screens/HomeScreen'
import AboutScreen from './screens/AboutScreen'
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"

Pada baris dua dan tiga, kami mengimpor dua layar yang baru saja kami buat. Kemudian, kami mengimpor NavigationContainer

dari @ bereaksi-navigasi/asli Dan createNativeStackNavigator dari @react-navigation/native-stack untuk membantu kami menghubungkan layar.

Selanjutnya, telepon createNativeStackNavigator untuk mengambil Stack:

const Stack = createNativeStackNavigator()

Ini memungkinkan kami untuk “menumpuk” layar yang ingin Anda transisikan di antara aplikasi Anda.

Buat fungsi komponen Aplikasi dan kembalikan kedua layar di seperti yang ditunjukkan di bawah ini. Pastikan untuk membungkusnya di atau tidak akan berhasil:

export default function App() { 
  return ( 
    <NavigationContainer> 
      <Stack.Navigator> 
        <Stack.Screen name="HomeScreen" component = {HomeScreen} /> 
        <Stack.Screen name="AboutScreen" component = {AboutScreen} /> 
      </Stack.Navigator> 
    </NavigationContainer> 
  );
}

Kode ini menempatkan layar HomeScreen di atas tumpukan, artinya aplikasi pertama-tama akan merender komponen Home saat selesai memuat.

Sekarang semuanya sudah diatur. Anda dapat menguji aplikasi dengan mengklik Buka Tentang tombol di UI Beranda. Ini akan mengarahkan Anda ke Tentangdan Anda akan menemukan namasitus properti yang ditampilkan di UI:

Hal terbaik tentang menggunakan React Navigation for Native adalah sangat mudah diatur dan digunakan. Itu tidak memerlukan konfigurasi tambahan apa pun (selain perpustakaan yang diperlukan yang Anda instal), dan Anda juga dapat terhubung berbagai jenis Paywalls (jika Anda berniat membuat aplikasi berbasis langganan).

Pelajari Lebih Lanjut Tentang Bereaksi Asli

React Native adalah framework lintas platform untuk membuat aplikasi yang berjalan di perangkat Android dan iOS. Ada begitu banyak yang harus dipelajari tentang React Native, dan jika Anda baru menggunakan framework ini, Anda harus mulai dengan mempelajari dasar-dasarnya.