Tutorial React Native : Melakukan Navigasi Halaman

Jarang sekali aplikasi yang dibuat hanya menggunakan single-page. Oleh karenya kita akan mencoba untuk membuat navigasi halaman alias perpindahan halaman pada React Native. Anggap saja kita telah membuat sebuah project React, jika belum membuatnya silahkan untuk membaca Tutorial ini.

Langkah pertama kita install terlebih dahulu menggunakan command line

npm install --save react-navigation

Untuk melakukan perubah pada project React Native, kita masuk ke direktori project dan edit file App.js dan untuk menampilkan perubahannya kita double klik R. Kita akan mencoba membuat navigasi dengan menggunakan StackNavigator.
Sekarang kita buka App.js dan buat codingnya menjadi seperti di bawah ini

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends Component{
  static navigationOptions = {
      title: 'Navigasi',
  }
  render(){
    return(
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Profile Page"
          onPress={() => this.props.navigation.navigate('Profile')}/>
      </View>
    );
  }
}

class ProfileScreen extends Component{
    render(){
      return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Profile Page</Text>
        </View>
      );
    }
}

const Navigation = StackNavigator({
    Home : {
      screen: HomeScreen,
    },
    Profile : {
      screen: ProfileScreen,
    }
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <Navigation/>;
  }
}

Setelah kita lakukan proses di atas, kita jalankan emulator android nya lalu masuk lagi ke command line setelah masuk ke direktori project ketik perintah di bawah ini

react-native run-android

Maka aplikasi kita akan muncul di emulator dengan tampilan sebagai berikut

React Native Navigasi masrahman28

dan jika kita tekan tombol Profile Page maka akan muncul halaman profile dengan navigasi ke halaman utama pada top bar nya

React Native Navigasi masrahman28