React Native – Understanding Navigator

React Native – Understanding Navigator

Dalam pengembangan aplikasi yang melibatkan beberapa screen, developer harus memperhatikan masalah navigasi. Bagaimana navigasi dengan Navigator pada react native bekerja dan bagaimana cara membuatnya?

Jika aplikasi anda terdiri lebih dari satu screen, anda harus mempertimbangkan mekanisme transisi satu screen ke screen yang lainnya. Proses navigasi pada react native dapat dilakukan dengan component Navigator. Sebagai contoh kita akan membuat aplikasi dengan tiga buah screen seperti tampilan berikut :

screen-shot-2016-10-30-at-3-27-21-pm

Contoh kasus pada aplikasi menggunakan Navigator terdiri dari tiga buah screen. Masing-masing screen akan membuka screen yang lain ketika melakukan sebuah perlakuan. Screen yang dibuka dari screen sebelumnya akan menyediakan sebuah tombol “Back” untuk kembali pada screen sebelumnya. Pertama-tama masukkan code berikut pada file root index index.ios.js atau index.android.js :

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Navigator, Text, View, TouchableHighlight} from 'react-native';

//import class yang akan dipanggil pada file lain
import WelcomePage from './application/components/WelcomePage';
import SampleMenu from './application/components/SampleMenu';
import DummyPage from './application/components/DummyPage';

class myfirstApp extends Component {
  renderScene(route, navigator) {
    console.log(route);
   // konfigurasi route.title dan route.index sesuai dengan route.name yang dipanggil
    if(route.name == 'root') {
      route.title='Welcome';
      route.index=0;
      return <WelcomePage navigator={navigator} />
    }

    if(route.name == 'samplemenu') {
      route.title='Example Menu Navigator';
      route.index=1;
      return <SampleMenu navigator={navigator} />
    }

    if(route.name == 'dummypage') {
      route.title='Dummy Page';
      route.index=2;
      return <DummyPage navigator={navigator} />
    }
  }

  render() {
    return (
        //memanggil component navigator
        <Navigator
          initialRoute={{name: 'root'}}
          renderScene={this.renderScene.bind(this)}
          //mendefinisikan navigationbar yang akan muncul pada header suatu screen
          navigationBar={
           <Navigator.NavigationBar
              style={{paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight}}
             routeMapper={{
               LeftButton: (route, navigator, index, navState) =>
              {
                if (route.index === 0) {
                  return null;
                } else {
                  return (
                    <TouchableHighlight onPress={() => navigator.pop()}>
                      <Text style={styles.navbar}>Back</Text>
                    </TouchableHighlight>
                  );
                }
              },
               RightButton: (route, navigator, index, navState) =>
                 { return (<Text></Text>); },
               Title: (route, navigator, index, navState) =>
               {
                 return (
                     <Text style={styles.titlebar}>{route.title}</Text>
                 );
               },
             }}
            configureScene={(route, routeStack) =>
              Navigator.SceneConfigs.FloatFromBottom}
           />
        }
        />
    )
  }
}

const styles = StyleSheet.create({
  titlebar: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  navbar: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'blue',
  },
});

AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Secara default aplikasi memiliki route.name=“root” sehingga akan me-render pada component “WelcomePage”. Pada halaman WelcomePage ketika pengguna melakukan click pada button “Set ListView and Navigator Sample” maka akan menjalankan perintah berikut :

          this.props.navigator.push({name:’samplemenu'});

Pada code di atas akan mengacu pada class “myfirstApp” dimana mengacu pada route.name=“samplemenu”.

Push() and Pop()

Untuk keperluan navigasi halaman Navigator memiliki fungsi push() dan pop(). Fungsi push() digunakan untuk memanggil component itu sendiri. Pada contoh code di atas pada WelcomePage terdapat perintah :

 this.props.navigator.push({name:’samplemenu’});

Code di atas memanggil fungsi push({name:’samplemenu’}) dari navigator variabel Props-nya. Artinya fungsi tersebut akan memanggil component itu sendiri dengan parameter name=samplemenu. Siapa yang dimaksud “component itu sendiri”? Walaupun code tersebut dituliskan pada component WelcomePage, tetapi perlu diperhatikan bahwa WelcomePage sebenarnya berasal dari componen “myfirstApp”. Artinya penggunaan fungsi push() akan memanggil screen “myfirstApp” kembali tetapi dengan parameter name:”samplemenu”. Apa yang dijalankan ketika name:”samplemenu” ? Ketika class myfirstApp dipanggil dengan parameter name:”samplemenu”, maka akan melakukan eksekusi code berikut :

      route.title='Example Menu Navigator';
      route.index=1;
      return <SampleMenu navigator={navigator} />

Dengan kata lain anda akan melihat sebuah halaman baru dengan screen dari component “SampleMenu”.

Jika push() digunakan untuk memanggil screen baru maka fungsi pop() dapat dikatakan digunakan untuk melakukan “Back” ke screen sebelumnya. Fungsi pop() akan berjalan jika pengguna melakukan click pada tombol “Back” pada suatu halaman. Dimana fungsi pop() dipanggil? Di setiap tombol halaman “Back” tepatnya pada code berikut :

    LeftButton: (route, navigator, index, navState) =>
              {
                if (route.index === 0) {
                  return null;
                } else {
                  return (
                    <TouchableHighlight onPress={() => navigator.pop()}>
                      <Text style={styles.navbar}>Back</Text>
                    </TouchableHighlight>
                  );
                }
              },

Code di atas mendefinisikan “LeftButton” di setiap screen yang ditampilkan. Pada code di atas LeftButton akan menampilkan button dengan label “Back”. Tombol “Back” hanya akan muncul jika route.index!==0, artinya screen yang memiliki tombol back bukan screen induk dari aplikasi.

Itulah sedikit penjelasan tentang navigator pada React Native.. Happy coding..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: