Pengantar
React Navigation adalah pustaka populer untuk perutean dan navigasi di aplikasi React Native.
Pustaka ini membantu memecahkan masalah navigasi di antara beberapa layar dan berbagi data antar layar.
Di akhir tutorial ini, Anda akan memiliki jaringan sosial dasar. Tutorial ini akan menampilkan sejumlah hubungan yang dimiliki pengguna dan menyediakan cara menghubungkan dengan teman lainnya. Anda akan menggunakan aplikasi sampel ini untuk mendalami cara navigasi layar aplikasi seluler menggunakan react-navigation.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda membutuhkan:
Catatan: Jika dahulu Anda menggunakan react-navigation, Anda mungkin akan menemukan banyak perbedaan. Anda dapat membaca dokumentasi untuk panduan tentang migrasi dari 3.x dan migrasi dari 4.x.
Tutorial ini telah diverifikasi pada Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3, dan @react-navigation/stack v5.9.0.
Langkah 1 — Membuat Aplikasi React Native Baru
Pertama, buat aplikasi React Native baru dengan memasukkan perintah berikut di terminal Anda:
- npx react-native init MySocialNetwork --version 0.63.2
Kemudian, masuk ke direktori baru:
Lalu mulai aplikasi untuk iOS:
Atau, untuk Android:
Catatan: Jika mengalami masalah, Anda mungkin perlu membaca pemecahan masalah untuk React Native CLI.
Ini akan membuat proyek kerangka untuk Anda. Penampilannya sangat tidak mirip jaringan sosial yang ada sekarang ini. Mari kita perbaiki.
Buka App.js:
Ganti isi App.js dengan kode berikut untuk menampilkan pesan sambutan:
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Welcome to MySocialNetwork!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Simpan berkas tersebut. Sekarang, bila Anda menjalankan aplikasi, pesan Selamat datang di MySocialNetwork! akan muncul di simulator Anda.
Di langkah selanjutnya, Anda akan menambahkan layar lainnya ke aplikasi.
Langkah 2 — Membuat HomeScreen dan FriendsScreen
Saat ini, Anda memiliki satu layar yang menampilkan pesan sambutan. Dalam langkah ini, Anda akan membuat dua layar untuk aplikasi: HomeScreen dan FriendsScreen.
HomeScreen
Aplikasi Anda akan membutuhkan HomeScreen. HomeScreen akan menampilkan jumlah teman yang sudah ada di jaringan Anda.
Ambil kode dari App.js dan tambahkan ke berkas baru bernama HomeScreen.js:
Buka HomeScreen.js:
Modifikasi HomeScreen.js untuk menggunakan HomeScreen sebagai ganti App:
HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>You have (undefined) friends.</Text>
</View>
);
}
}
// ...
export default HomeScreen;
Kode ini akan menghasilkan pesan penampung You have (undefined) friends.. Nanti, Anda akan memberikan suatu nilai.
FriendsScreen
Aplikasi Anda juga akan membutuhkan FriendsScreen. Di FriendsScreen, Anda dapat menambahkan teman baru.
Ambil kode dari App.js dan tambahkan ke berkas baru bernama FriendsScreen.js:
- cp App.js FriendsScreen.js
Buka FriendsScreen.js:
Modifikasi FriendsScreen.js untuk menggunakan FriendsScreen sebagai ganti App:
FriendsScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class FriendsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Add friends here!</Text>
</View>
);
}
}
// ...
export default FriendsScreen;
Kode ini akan menghasilkan pesan Add friends here!. .
Saat ini, Anda memiliki HomeScreen dan FriendsScreen. Namun, tidak ada cara navigasi di antara layar-layar tersebut. Anda akan membangun fungsionalitas ini di langkah selanjutnya.
Langkah 3 — Menggunakan StackNavigator dengan React Navigation
Untuk navigasi di antara beberapa layar, Anda akan menggunakan StackNavigator. Cara kerja StackNavigator persis seperti call stack. Setiap layar yang Anda tuju akan didorong ke bagian atas tumpukan. Setiap kali menekan tombol kembali, layar-layar akan bermunculan di bagian atas tumpukan.
Pertama, instal @react-navigation/native:
- npm install @react-navigation/native@5.7.3
Kemudian, instal @react-navigation/stack dan dependensi peer-nya:
- npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0
Catatan: Jika mengembangkan untuk iOS, Anda mungkin perlu masuk ke direktori ios dan menjalankan pod install.
Selanjutnya, kembali ke App.js:
Tambahkan NavigationContainer dan createStackNavigator ke App.js:
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
Kemudian, ganti isi render:
App.js
// ...
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
</Stack.Navigator>
</NavigationContainer>
);
}
}
// ...
Disarangkan di dalam <Stack.Navigator>, tambahkan HomeScreen:
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
const Stack = createStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
// ...
Kode ini membuat tumpukan sangat kecil untuk navigator Anda dengan satu layar saja: HomeScreen.
Disarangkan di dalam <Stack.Navigator>, tambahkan FriendsScreen:
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import FriendsScreen from './FriendsScreen';
const Stack = createStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Friends"
component={FriendsScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
// ...
Kode ini menambahkan FriendsScreen ke navigator.
Catatan: Ini berbeda dengan cara menggunakan createStackNavigator di React Navigation versi sebelumnya.
Sekarang, navigator mengetahui kedua layar Anda.
Menambahkan Tombol ke HomeScreen dan FriendsScreen
Terakhir, tambahkan tombol untuk membawa Anda di antara dua layar.
Dalam HomeScreen.js, tambahkan kode berikut:
HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>You have (undefined) friends.</Text>
<Button
title="Add some friends"
onPress={() =>
this.props.navigation.navigate('Friends')
}
/>
</View>
);
}
}
// ...
Dalam FriendsScreen.js, tambahkan kode berikut:
FriendsScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
class FriendsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Add friends here!</Text>
<Button
title="Back to home"
onPress={() =>
this.props.navigation.navigate('Home')
}
/>
</View>
);
}
}
// ...
Mari kita bahas this.props.navigation. Selama layar Anda disertakan di StackNavigator, layar itu secara otomatis akan mewarisi banyak properti berguna dari objek navigation. Dalam hal ini, Anda menggunakan navigate untuk berpindah ke halaman yang berbeda.
Jika sekarang Anda membuka simulator, Anda dapat melakukan navigasi di antara HomeScreen dan FriendsScreen.
Langkah 4 — Menggunakan Context untuk Menyalurkan Data ke Layar Lain
Dalam langkah ini, Anda akan membuat larik kemungkinan teman — Alice, Bob, dan Sammy — dan larik kosong dari teman saat ini. Anda juga akan membuat fungsionalitas bagi pengguna untuk menambahkan kemungkinan teman ke teman-temannya saat ini.
Buka App.js:
Tambahkan possibleFriends dan currentFriends ke status komponen:
App.js
// ...
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
possibleFriends: [
'Alice',
'Bob',
'Sammy',
],
currentFriends: [],
}
}
// ...
}
// ...
Selanjutnya, tambahkan fungsi untuk memindahkan kemungkinan teman ke daftar teman saat ini:
App.js
// ...
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
possibleFriends: [
'Alice',
'Bob',
'Sammy',
],
currentFriends: [],
}
}
addFriend = (index) => {
const {
currentFriends,
possibleFriends,
} = this.state
// Pull friend out of possibleFriends
const addedFriend = possibleFriends.splice(index, 1)
// And put friend in currentFriends
currentFriends.push(addedFriend)
// Finally, update the app state
this.setState({
currentFriends,
possibleFriends,
})
}
// ...
}
// ...
Saat ini, Anda telah selesai membangun fungsionalitas untuk menambahkan teman.
Menambahkan FriendsContext ke App
Sekarang Anda dapat menambahkan teman di App.js, tetapi Anda nanti perlu menambahkannya ke FriendsScreen.js, dan membuatnya ditampilkan di HomeScreen.js. Karena proyek ini dibuat dengan React, Anda dapat memasukkan fungsionalitas ini ke dalam layar yang memiliki konteks.
Catatan: Di React Navigation versi sebelumnya, kita dapat menggunakan screenProps untuk berbagi data di antara layar. Dalam React Navigation versi saat ini, disarankan menggunakan React Context untuk berbagi data di antara layar.
Untuk menghindari referensi melingkar, Anda nanti memerlukan berkas FriendsContext baru:
Ekspor FriendsContext:
FriendsContext
import React from 'react';
export const FriendsContext = React.createContext();
Buka App.js:
Tambahkan FriendsContext:
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { FriendsContext } from './FriendsContext';
import Home from './Home';
import Friends from './Friends';
const Stack = createStackNavigator();
class App extends React.Component {
// ...
render() {
return (
<FriendsContext.Provider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Friends"
component={Friends}
/>
</Stack.Navigator>
</NavigationContainer>
</FriendsContext.Provider>
);
}
}
// ...
Kode ini membuat FriendsContext sebagai objek Context baru dan membungkus NavigationContainer dalam komponen Context.Provider sehingga anak-anak di pohon komponen dapat berlangganan perubahan konteks.
Karena Anda tidak lagi menggunakan View atau Text, bisa saja menghapus impor itu dari react-native.
Anda nanti perlu memberikan value agar data dapat diakses oleh konsumen:
App.js
// ...
class App extends React.Component {
// ...
render() {
return (
<FriendsContext.Provider
value={
{
currentFriends: this.state.currentFriends,
possibleFriends: this.state.possibleFriends,
addFriend: this.addFriend
}
}
>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Friends"
component={Friends}
/>
</Stack.Navigator>
</NavigationContainer>
</FriendsContext.Provider>
);
}
}
// ...
Ini akan memungkinkan HomeScreen dan FriendsScreen untuk merujuk perubahan konteks apa pun pada currentFriends dan possibleFriends.
Sekarang Anda dapat mengerjakan perujukan konteks di layar.
Menambahkan FriendsContext ke HomeScreen
Dalam langkah ini, Anda akan menyiapkan aplikasi untuk menampilkan jumlah teman saat ini.
Buka HomeScreen.js:
Lalu tambahkan FriendsContext:
HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';
class HomeScreen extends React.Component {
// ...
}
HomeScreen.contextType = FriendsContext;
// ...
Kode ini membuat Class.contextType. Kini Anda dapat mengakses konteks di layar.
Misalnya, mari kita buat agar HomeScreen menampilkan jumlah currentFriends yang Anda miliki:
HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';
class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>You have { this.context.currentFriends.length } friends!</Text>
<Button
title="Add some friends"
onPress={() =>
this.props.navigation.navigate('Friends')
}
/>
</View>
);
}
}
HomeScreen.contextType = FriendsContext;
// ...
Jika Anda membuka aplikasi lagi di simulator dan menampilkan HomeScreen, Anda akan melihat pesan: You have 0 friends!.
Menambahkan FriendsContext ke FriendsScreen
Dalam langkah ini, Anda akan menyiapkan aplikasi untuk menampilkan kemungkinan teman dan menyediakan tombol untuk menambahkannya ke teman saat ini.
Selanjutnya, buka FriendsScreen.js:
Lalu tambahkan FriendsContext:
FriendsScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';
class FriendsScreen extends React.Component {
// ...
}
FriendsScreen.contextType = FriendsContext;
// ...
Kode ini membuat Class.contextType.
Sekarang, buat tombol untuk menambahkan teman di FriendsScreen.js:
FriendsScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';
class Friends extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Add friends here!</Text>
{
this.context.possibleFriends.map((friend, index) => (
<Button
key={ friend }
title={ `Add ${ friend }` }
onPress={() =>
this.context.addFriend(index)
}
/>
))
}
<Button
title="Back to home"
onPress={() =>
this.props.navigation.navigate('Home')
}
/>
</View>
);
}
}
FriendsScreen.contextType = FriendsContext;
// ...
Jika Anda membuka aplikasi lagi di simulator dan menampilkan FriendsScreen, Anda akan melihat daftar teman untuk ditambahkan.
Jika Anda masuk ke FriendsScreen dan mengklik tombol untuk menambahkan teman, Anda akan melihat daftar possibleFriends yang berkurang. Jika Anda masuk ke HomeScreen, Anda akan melihat jumlah teman bertambah.
Kini Anda dapat melakukan navigasi di antara layar dan berbagi data.
Kesimpulan
Dalam tutorial ini, Anda telah membuat aplikasi sampel React Native dengan beberapa layar. Dengan menggunakan React Navigation, Anda telah membuat cara navigasi di antara layar. Dengan React Context, Anda mengembangkan cara berbagi data di antara beberapa layar.
Kode sumber lengkap untuk tutorial ini tersedia di GitHub.
Jika Anda ingin lebih mendalami React Navigation, lihat dokumentasinya.
React Navigation bukan satu-satunya solusi perutean dan navigasi. Ada juga React Native Navigation, React Native Router Flux, dan React Router Native.
Jika Anda ingin mempelajari lebih lanjut tentang React, lihat seri Cara Melakukan Pengodean di React.js dari kami, atau baca halaman topik React kami untuk proyek pemrograman dan latihan.
