React Native Navigation Tutorial : Drawer Navigator Stack & Tab Navigator Inside | AMTech

Hallo Penggemar Koding Indonesia. Berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada pertemuan kali ini kita akan membahas lanjutan dari materi Navigasi. Pada tutorial ini kita tetap menggunakan library React Navigation.

Yang akan kita pelajari pada tutorial ini adalah:

– Jawaban dari test kemarin (menggabungkan Stack Navigation dengan Tab Navigation)

– Drawer Navigator

– Stack & Tab Navigator Inside Drawer Navigator

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

Pertama: Membuka project React Native sebelumnya

Pada langkah pertama ini kita tidak akan membuat project baru melainkan menggunakan project yang sudah ada sebelumnya yaitu project “Navigasi”. Bagi yang belum mengikuti bisa diikuti disini.

Silahkan buka project sebelumnya di text editor dan selanjutnya coba jalankan projectnya dengan perintah seperti biasa:

react-native run-android

Jika project masih berjalan atau berfungsi maka kita akan membuat program yang pertama yaitu (Menggabungkan Stack Navigation dengan Tab Navigation), program ini merupakan program dari jawaban test kecil-kecilan yang kita lakukan pada tutorial Navigasi yang pertama bagi yang mengikuti.

Stack Navigator Inside Tab Navigator

Sekarang kita akan mencoba membuat sebuah tab navigator yang di dalamnya terdapat Stack Navigator.

Caranya :

Pertama silahkan tuliskan kode program berikut pada file App.js :

import React from 'react'; import { AppRegistry, Text, View, Button, } from 'react-native'; import { TabNavigator, 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 RecentChatsScreen extends React.Component { render() { return ( <view> <text>List Of Recent</Text> <Button onPress={() => this.props.navigation.navigate('Chat', { user: 'Andry' })} title="Chat with Andry" /> </View> ); } } class AllContactsScreen extends React.Component { render() { return ( <view> <text>List Of All Contacts</Text> <Button onPress={() => this.props.navigation.navigate('Chat', { user: 'Yusuf' })} title="Chat with Yusuf" /> </View> ); } } const MainScreenNavigator = TabNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); const ChatApp = StackNavigator({ Home: { screen: MainScreenNavigator, navigationOptions: { title: 'My Chats', }, }, Chat: { screen: ChatScreen }, }) AppRegistry.registerComponent('Navigasi', () => ChatApp);

Setelah itu jalankan programnya, maka akan menjadi seperti ini :

        

Selanjutnya kita akan membuat Aplikasi Drawer Navigator.

Drawer Navigator

Untuk bagian Drawer Navigator sebenarnya tidak terlalu berbeda dengan Stack Navigator maupun Tab Navigator, kita hanya perlu import DrawerNavigator dari react-navigator. Sebagai bayangan berikut ini cara import tiap Navigator (Stack, Tab, dan Drawer).

import Tab Navigator

import Stack Navigator

import Drawer Navigator

Untuk mencoba membuat Drawer Navigator sederhana silahkan tuliskan kode program berikut 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>HALAMAN HOME</Text> } } class AllContactsScreen extends React.Component { render() { return <text>HALAMAN PROFILE</Text> } } const MainScreenNavigator = DrawerNavigator({ Home: { screen: RecentChatsScreen }, Profile: { screen: AllContactsScreen }, }); AppRegistry.registerComponent('Navigasi', () => MainScreenNavigator);

Setelah itu silahkan jalankan programnya. Hasilnya seperti berikut :

          

Untuk membuka Drawer silahkan geser layar dari sisi ujung kiri ke kanan. Untuk mempercantik silahkan tambahkan icon dan lainnya.

Selanjutnya kita akan membuat Stack Navigator dan Tab Navigator di dalam Drawer Navigator

Sebenarnya untuk tahap ini bisa kalian coba sendiri, tapi mungkin belum kebayang maka kita akan coba bersama-sama hanya untuk Stack Navigator di Dalam Drawer Navigator, untuk yang Stack & Tab Navigator di dalam Drawer Navigator bisa kalian coba sendiri sebagai bahan latihan.

Stack Navigator Inside Drawer Navigator

silahkan tuliskan kode program berikut ini pada file App.js :

import React from 'react'; import { AppRegistry, Text, View, Button, } from 'react-native'; import { DrawerNavigator, 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 RecentChatsScreen extends React.Component { render() { return ( <view> <text>List Of Recent</Text> <Button onPress={() => this.props.navigation.navigate('Chat', { user: 'Andry' })} title="Chat with Andry" /> </View> ); } } class AllContactsScreen extends React.Component { render() { return ( <view> <text>List Of All Contacts</Text> <Button onPress={() => this.props.navigation.navigate('Chat', { user: 'Yusuf' })} title="Chat with Yusuf" /> </View> ); } } const MainScreenNavigator = DrawerNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); const ChatApp = StackNavigator({ Home: { screen: MainScreenNavigator, navigationOptions: { title: 'My Chats', }, }, Chat: { screen: ChatScreen }, }) AppRegistry.registerComponent('Navigasi', () => ChatApp);

Setelah itu silahkan jalankan programnya maka akan seperti berikut :

  

Tampilan Awal Sebelum Drawer Dibuka  

Setelah Drawer digeser (kanan ke kiri)    

Jika kalian perhatikan program di atas sama dengan program Stack Navigator Inside Tab Navigator hanya saja berbeda dibagian Tab Navgator yang dirubah menjadi Drawer Navigator.

Tambahan :

jika kita ingin menambahkan icon pada aplikasi kita, kita bisa menggunakan Library, antara lain yaitu react-native-vector-icons atau juga bisa react-native-elements. Kalian bisa lihat langsung di website documentationnya bagaimana cara instalasinya.

Demikin tutorial mengenai React Navigation.

sumber:

http://www.kodingindonesia.com/drawer-navigator-stack-tab-navigator-inside-drawer-navigator/