Drawer Navigator Stack dan Tab Navigator Inside di React Native

Hallo sahabat 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 :