Membuat Navigasi dengan react-native-router-flux

Navigasi adalah komponen penting dalam sebuah aplikasi, karena sebagian besar aplikasi pasti memiliki lebih dari satu halaman. nah untuk berpindah dari satu halaman ke halaman lainnya kita memerlukan komponen navigasi ini.

Pada project kali ini saya akan menggunakan  react-native-router-flux untuk membantu navigasi dalam aplikasi.

Cara install  react-native-router-flux

Untuk menambahkan  modul React Native Vector Icons ke dalam project anda, pertama buka terminal.

Apabila anda belum berada di folder project React Native anda, silahkan masuk dulu ke folder Project React Native Anda.

Tambahkan modul react-native-router-flux dengan menjalankan  perintah

Yarn add react-native-router-flux

Bila yarn belum ada di komputer kalian silahkan gunakan ini:

Npm install react-native-router-flux

Selanjutnya menambahkan code untuk mengatur navigasi. Kita bisa menambahkan code pada file App.js atau membuat file terpisah. Nah saya akan membuat code navigasi pada file terpisah supaya lebih mudah di kelola. Saya akan buat file Routes.js di folder src. Lalu ketikan code berikut pada file tersebut:

import React, { Component } from 'react';
import { Router, Stack, Scene } from 'react-native-router-flux';
import Login from './pages/Login';
import Home from './pages/Home';
import Signup from './pages/Signup';

export default class Routes extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
        <Router>
        <Stack key="root" hideNavBar={true}>     
            <Scene key="login" component={Login} title="Login" initial={true} />
            <Scene key="signup" component={Signup} title="Register" />
            <Scene key="home" component={Home} title="Home" />   
        </Stack>
    </Router>
    );
  }
}

Penjelasan Code di atas:

import React, { Component } from 'react';
import { Router, Stack, Scene } from 'react-native-router-flux';
import Login from './pages/Login';
import Home from './pages/Home';
import Signup from './pages/Signup';

Bagian ini adalah untuk import component react native, component react-native-router-flux serta semua halaman yang akan kita navigasikan.

 <Router>
        <Stack key="root" hideNavBar={true}>     
            <Scene key="login" component={Login} title="Login" initial={true} />
            <Scene key="signup" component={Signup} title="Register" />
            <Scene key="home" component={Home} title="Home" />   
        </Stack>
 </Router>

Dan code di atas adalah untuk mengatur navigasi. bagian yang di isi  initial={true} akan di jalankan pada saat pertama aplikasi di buka.

Dan di file App.js kita hanya perlu menambahkan code berikut:

import React, { Component } from 'react';
import {  StyleSheet,  View } from 'react-native';
import Routes from './src/Routes';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Routes />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container : {
    flex: 1,
  },

});

Demikianlah cara menambahkan  react-native-router-flux untuk navigasi pada project React Native. Untuk perintah-perintah yang di gunakan dalam melakukan navigasi, akan di bahas dalam artikel mendatang.

Happy Coding.