Blog

Belajar React Native - Navigasi React Native

by
published on
Belajar React Native - Navigasi React Native

Jarang sekali aplikasi mobile hanya memiliki satu layar.

Biasanya, aplikasi mobile memiliki lebih dari satu layar, seperti layar utama dan sisanya untuk setting.

Walaupun aplikasi mobile ada yang hanya satu layar, kita bisa membuat aplikasi mobile dengan banyak layar dengan React Native.

Akan tetapi, untuk keperluan tersebut, kita harus menggunakan modul luar.

Beberapa pilihan modul luar untuk navigasi antar layar adalah sebagai berikut:

  • React Navigation
  • React Native Navigation
  • React Native Router Flux

Masing-masing punya caranya sendiri untuk menangani navigasi.

Walaupun kita memiliki beberapa pilihan di atas, yang dibahas pada buku ini hanya React Navigation.

Mengenal React Navigation

React Navigation adalah solusi React Native untuk keperluan navigasi yang semuanya ditulis dengan Javascript.

Dengan demikian, kita bisa memahami source code-nya.

React Navigation membutuhkan react-native@^0.54.x, maka pastikan versi ini terpenuhi.

React Navigation mendukung beberapa jenis navigation ini:

  • Stack Navigator
  • Switch Navigator
  • Animated Switch Navigator
  • Drawer Navigator
  • Tab Navigator
  • Material Tab Navigator

Anda bebas memilih jenis navigator yang Anda inginkan dan cara mengubahnya dari satu jenis ke jenis yang lain juga bisa dibilang mudah.

Membuat React Navigation Pertama

Sekarang saatnya praktek.

Untuk mencoba React Navigation, buatlah sebuah project React Native bernama NavigationDemo:

react-native init NavigationDemo

Tunggu sampai pembuatan project selesai.

Setelah selesai, masuk ke folder NavigationDemo dengan PowerShell:

cd NavigationDemo

Selanjutnya install React Navigation:

npm install react-navigation

Selanjutnya install React Navigation Gesture Handler:

npm install react-native-gesture-handler

Selanjutnya link semua native dependencies:

react-native link react-native-gesture-handler

Langkah terakhir, ubah MainActivity.java menjadi:

package com.navigationdemo;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {
	/**
	* Returns the name of the main component registered from JavaScript.
	* This is used to schedule rendering of the component.
	*/
	
	@Override
	protected String getMainComponentName() {
		return "NavigationDemo";
	}
	
	@Override
	protected ReactActivityDelegate createReactActivityDelegate() {
		return new ReactActivityDelegate(this, getMainComponentName()) {
			@Override
			protected ReactRootView createRootView() {
				return new RNGestureHandlerEnabledRootView(MainActivity.this);
			}
		};
	}
}

Sekarang langkah persiapan selesai.

Langkah selanjutnya adalah membuat dua Component tambahan.

Masing-masing Component adalah satu layar.

Untuk itu, buatlah 2 file baru di folder "NavigationDemo":

  • Login.js
  • Member.js

Isi dari file "Login.js" adalah sebagai berikut:

import React, { Component } from "react";
import { View, Button } from "react-native";

class Login extends Component {
	static navigationOptions = {
		title: "Ini Login"
	};
	
	render() {
		const { navigate } = this.props.navigation;
		return (
			<View>
				<Button
				onPress={() => {
					navigate("Member");
				}}
				title="Pergi ke Member"
				color="#ff0000"
				/>
			</View>
		);
	}
}

export default Login;

Sedangkan isi dari file "Member.js" adalah sebagai berikut:

import React, { Component } from "react";
import { View, Button } from "react-native";

class Member extends Component {
  static navigationOptions = {
    title: "Ini Member"
  };

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View>
        <Button
          onPress={() => {
            navigate("Login");
          }}
          title="Pergi ke Login"
          color="#00ff00"
        />
      </View>
    );
  }
}

export default Member;

Selanjutnya ubah isi file "App.js" menjadi seperti ini:

import { createDrawerNavigator, createAppContainer } from "react-navigation";
import Login from "./Login";
import Member from "./Member";

const MainNavigator = createDrawerNavigator({
  Login: { screen: Login },
  Member: { screen: Member }
});

const App = createAppContainer(MainNavigator);

export default App;

Selanjutnya, jalankan emulator dan jalankan aplikasinya:

react-native run-android

Nanti tampilannya seperti ini:

Setelah Anda mengklik tombol, jadi seperti ini:

Anda bisa bolak-balik dari satu layar ke layar lainnya.

Penjelasannya begini...

Pertama, Anda membuat Component bernama Login pada file Login.js.

Sebagai tambahannya disertakan sebuah variable statis yang menunjukkan kepada sistem apa nama layar ini:

static navigationOptions = {
	title: "Ini Login"
};

Kemudian Anda mengexportnya dengan cara biasa:

export default Login;

Hal yang serupa terjadi pada Member :

static navigationOptions = {
	title: "Ini Member"
};
export default Member;

Terakhir, pada Component App, Anda mendaftarkan kedua Component tadi sebagai layar.

Selain itu, Anda juga memberi perilaku dari navigatornya sebagai Stack Navigator:

const MainNavigator = createStackNavigator({
	Login: { screen: Login },
	Member: { screen: Member }
});

Selanjutnya, Anda membuat container layar tersebut dengan cara ini:

const App = createAppContainer(MainNavigator);

Kemudian mengexportnya seperti biasa:

export default App;

Mengubah Jenis Navigator

Tadi sudah saya katakan bahwa untuk mengubah jenis navigator, caranya mudah.

Ini serius, karena Anda tinggal mengganti createStackNavigator dengan jenis lain.

Berikut ini detailnya:

  • Switch Navigator dengan createSwitchNavigator
  • Animated Switch Navigator dengan createAnimatedSwitchNavigator
  • Drawer Navigator dengan createDrawerNavigator
  • Tab Navigator dengan createTabNavigator
  • dan seterusnya

Jadi, jika Anda ingin mengubahnya menjadi Drawer Navigator, ubah file App.js menjadi:

import { createDrawerNavigator, createAppContainer } from "react-navigation";
import Login from "./Login";
import Member from "./Member";

const MainNavigator = createDrawerNavigator({
	Login: { screen: Login },
	Member: { screen: Member }
});

const App = createAppContainer(MainNavigator);

export default App;

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.