React Native Navigation Tutorial : Stack dan Tab Navigator | AMTech

Hallo Penggemar Koding Indonesia, berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada pertemuan kali ini kita akan membahas tentang Navigasi. Pada tutorial ini kita akan menggunakan Library React Navigation kalian bisa pelajari juga dokumentasi dari react navigation disini.

Pada tutorial kali ini kita akan berkenalan dulu dan mempelajari antara lain :

1. Setup and Installation
2. Stack Navigator
3. Tab Navigator

Oke, agar tidak mengulur waktu mari kita langsung saja mulai.

Setup and Installation

jika kita mengikuti dokumentasi dari react navigation maka langkah-langkahnya adalah seperti berikut ini:

sedangkan saat mengikut perintah tersebut penulis mendapatkan sintaks error. Maka untuk alternatifnya kita akan menggunakan langkah-langkah lain, dengan cara berikut ini :

Pertama: Membuat Project Baru React Native

Pada langkah pertama ini pastinya kita harus membuat project baru, pada project kali ini kita akan membuat project dengan nama “Navigasi”.

Caranya:

Buka Terminal (Command Prompt)

Di terminal silahkan arahkan ke folder dimana kita akan menginstall projectnya.

Install project dengan menuliskan perintah berikut 

react-native init Navigasi

react-native init Navigasi

Lalu tunggu hingga proses installasi selesai.

Kedua : Install React Navigation

Setelah berhasil membuat project baru selanjutnya kita akan menginstall React Navigation.

Caranya :

Buka Terminal (Command Prompt)

Arahkan kefolder dimana kita menginstall Project kita tadi

Selanjutnya tuliskan perintah berikut :

npm i

npm i

Setelah itu tuliskan perintah berikut :

npm i react-navigation

npm i react-navigation

Ketiga : Jalankan Program

Setelah membuat project dan memasang React Navigation maka langkah selanjutnya adalah menjalankan programnya untuk mengetahui berhasil atau tidak.

Caranya :

Buka terminal (Command Prompt)

Arahkan ke folder dimana kita menginstall project kita tadi

Setelah itu tuliskan perintah 

react-native run-android

react-native run-android

Penting:
Pastikan emulator (Genymotion) atau yang lainnya telah berjalan, atau device Android kita telah terhubung

Jika aplikasi berhasil dijalankan maka kita telah berhasil memasang React Navigation.

Selanjutnya kita akan mencoba apakah React Navigationnya berfungsi dengan cara membuat Stack Navigation dan Tab Navigator.

Stack Navigator

Sekarang mari kita coba membuat Stack Navigator. Sebelum membuat program silahkan membuat file JavaScript di dalam folder project dengan nama (App.js). File tersebut akan digunakan untuk tempat program yang nantinya akan dipanggil di file index.android.js

Setelah Membuat file App.js

Selanjutnya silahkan tuliskan program berikut di dalam file App.js

import React from 'react'; import { AppRegistry, Text, } from 'react-native'; import { StackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { return <text>Hello, Sahabat Koding Indonesia</Text> } } const Bar = StackNavigator({ Home: { screen: HomeScreen }, }); AppRegistry.registerComponent('Navigasi', () => Bar);

Selanjutnya pada file index.android.js ganti program menjadi seperti berikut:

import './App'

import './App'

Selanjutnya silahkan jalankan projectnya pada emulator atau device android, maka hasilnya akan seperti berikut ini :

Jika tampilan telah sesuai seperti di atas maka React Navigation telah berhasil terpasang dan projectnya berhasil.

Sekarang kita akan mencoba membuat aplikasi seperti berikut ini:

Ketika button biru yang bertuliskan Chat With Koding Indonesia diklik maka akan masuk ke Screen berikut :

Caranya :

Silahkan tuliskan kode program berikut pada file App.js :

import React from 'react'; import { AppRegistry, Text, Button, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; class ChatScreen extends React.Component { static navigationOptions = { title: 'Chat with Lucy', }; render() { return ( <view> <text>Chat with Lucy</Text> </View> ); } } class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const { navigate } = this.props.navigation; return ( <view> <text>Hello, Chat App!</Text> <Button onPress={() => navigate('Chat')} title="Chat with Lucy" /> </View> ); } } const Navigasi = StackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen }, }); AppRegistry.registerComponent('Navigasi', () => Navigasi);

Setelah itu jalankan programnya pada emulator atau device android maka hasilnya akan sama seperti gambar di atas tadi.

Selanjutnya kita akan mencoba menggunakan passing parameter pada Stack Navigator, silahkan tulis program di bawah ini :

import React from 'react'; import { AppRegistry, Text, Button, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; class ChatScreen extends React.Component { static navigationOptions = ({ navigation }) => ({ title: `Chat with ${navigation.state.params.user}`, }); render() { const { params } = this.props.navigation.state; return ( <view> <text>Chat with {params.user}</Text> </View> ); } } class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const { navigate } = this.props.navigation; return ( <view> <text>Hello, Chat App!</Text> <Button onPress={() => navigate('Chat', { user: 'Koding Indonesia' })} title="Chat with Koding Indonesia" /> </View> ); } } const Navigasi = StackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen }, }); AppRegistry.registerComponent('Navigasi', () => Navigasi); 

Setelah itu jalankan programnya, tidak akan ada perubahan pada tampilan tetapi jika kita amati kita memasukkan nama “Koding Indonesia” pada parameter yang bernama user.

Selanjutnya mari kita belajar Tab Navigator

Tab Navigator

Pada bagian ini kita akan membuat Tab Navigasi seperti gambar berikut :

Caranya :

Tuliskan kode program berikut ini pada file App.js :

import React from 'react'; import { AppRegistry, Text, } from 'react-native'; import { TabNavigator } from "react-navigation"; class RecentChatsScreen extends React.Component { render() { return <text>List of recent chats</Text> } } class AllContactsScreen extends React.Component { render() { return <text>List of all contacts</Text> } } const MainScreenNavigator = TabNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); AppRegistry.registerComponent('Navigasi', () => MainScreenNavigator);

Setelah itu jalankan programnya pada emulator atau device android, maka hasilnya akan seperti berikut :

Selanjutnya kita coba tambahkan button dan alert pada setiab bagian screen tab. Caranya silahkan tuliskan program di bawah ini:

import React from 'react'; import { AppRegistry, Text, Button, View, Alert } from 'react-native'; import { TabNavigator } from 'react-navigation'; class RecentChatsScreen extends React.Component { static navigationOptions = { title: 'Chat Yulia', }; render() { return ( <view> <text>Hello, Chat App!</Text> <Button onPress={() => Alert.alert("Hello Yulia")} title="Chat with Yulia" /> </View> ); } } class AllContactsScreen extends React.Component { static navigationOptions = { title: 'Chat Ahmad', }; render() { return ( <view> <text>Hello, Chat App!</Text> <Button onPress={() => Alert.alert("Hello Ahmad")} title="Chat with Ahmad" /> </View> ); } } export const MainScreenNavigator = TabNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); AppRegistry.registerComponent('Navigasi', () => MainScreenNavigator);

Setelah itu jalankan programnya, maka akan menjadi seperti ini :

Demikin tutorial mengenai React Navigation untuk Stack Navigator dan Tab Navigator. Untuk bahan belajar silahkan tambahkan Stack Navigator pada percobaan terakhir shingga ketika button ditekan akan muncul screen baru seperti halnya Stack Navigator sebelumnya.

Selanjutnya kita akan coba pelajari lagi React Navigation lanjutan Insya’Alloh.

sumber:

http://www.kodingindonesia.com/react-native-navigation-stack-dan-tab-navigator/