Menggunakan navigator tumpukan dapat membantu transisi aplikasi Anda dari satu layar ke layar berikutnya, dengan kode minimum.

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 memulai

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

  • Node.js v10 atau lebih tinggi
  • Xcode atau Studio Android (diatur untuk menjalankan emulator)
  • Bereaksi CLI Asli

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 Rumah, yang 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 mirip dengan apa yang terjadi saat Anda mengklik ikon "kembali" di browser web Anda.

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

1. Instal Navigasi Bereaksi untuk Aplikasi Asli

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

npm saya @reaksi-navigasi/warga asli

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

npm saya @reaksi-navigasi/warga asli-tumpukan

Untuk menginstal yang kedua, jalankan ini:

npm saya bereaksi-warga asli-layar

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:

impor * sebagai Reaksi dari'reaksi';
impor { Teks, Tampilan, StyleSheet, TouchableOpacity } dari'bereaksi-asli';
impor { status penggunaan } dari'reaksi'

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

eksporbawaanfungsiTampilan depan({navigasi}) { 
kembali ( 
<Melihatgaya={styles.container}>
<Teksgaya={styles.paragraph}> Tampilan depan Teks>
 judul="Pergi ke Tentang"
 onPress={() => navigasi.navigasi('Tentang Layar')} 
 /> 
Melihat>
 );
}

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 mau meneruskan data ke fungsi; inilah cara Anda melakukannya:

eksporbawaanfungsiTampilan depan({navigasi}) { 
const data = { namasitus: "Teknologi John" }
kembali ( 
<Melihatgaya={styles.container}>
// Teks masuk ke sini 
 judul="Pergi ke Tentang"
 onPress={() => navigasi.navigasi('Tentang Layar', data)} 
 /> 
Melihat>
 );
}

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:

impor * sebagai Reaksi dari'reaksi';
impor { Teks, Tampilan, Lembar Gaya, Tombol } dari'bereaksi-asli';

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

eksporbawaanfungsiTentang Layar({rute}) { 
membiarkan dataObj = route.params
kembali ( 
<Melihatgaya={styles.container}>
<Teksgaya={styles.paragraph}>
 Ini adalah Layar Tentang {dataObj.websiteName} 
Teks>
Melihat>
 );
}

Jika Anda ingat, kami menentukan satu properti di objek data bernama namasitus, yang 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:

impor * sebagai Reaksi dari'reaksi';
impor Tampilan depan dari'./layar/Layar Beranda'
impor Tentang Layar dari'./screens/AboutScreen'
impor { NavigationContainer } dari"@react-navigasi/asli"
impor { createNativeStackNavigator } dari"@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:

eksporbawaanfungsiAplikasi() { 
kembali ( 
<NavigationContainer>
<Tumpukan. Navigator>
<Tumpukan. Layarnama="Tampilan depan"komponen = {Tampilan depan} />
<Tumpukan. Layarnama="Tentang Layar"komponen = {Tentang Layar} />
Tumpukan. 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 Tentang, dan Anda akan menemukan namasitus properti yang ditampilkan di UI:

2 Gambar

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.