React Native – Routing (Navigation)

Install React Navigation

Untuk langkah pertama anda harus menginstall react-navigation menggunakan npm. Pastikan posisi folder ative terminal atau command line anda berada pada “Root Folder Project” anda kemudian jalankan perintah dibawah ini:

npm install --save react-navigation

Implementasi React Navigation

Berikut adalah contoh penggunaan react-navigation:

import React, { Component } from 'react';
import { Button } from 'react-native';
import {createStackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}
class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Profile',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Back To the Home"
        onPress={() =>
          navigate('Home', { name: 'Home' })
        }
      />
    );
  }
}

const App = createStackNavigator({
 Home: { screen: HomeScreen },
 Profile: { screen: ProfileScreen },
});

export default App;

Fungsi this.props.navigation digunakan untuk pindah dari halaman satu ke halaman lain. Detail penjelasan tentang React Navigation dapat anda lihat di sini.

Add a Comment

Your email address will not be published. Required fields are marked *