Scribd
Upload
37 views16 pages

React Navigation: Mobile Development

The document discusses React Navigation, a navigation solution for React Native applications. It describes installing React Navigation with NPM and creating a simple navigation structure with multiple screens using StackNavigator. It then shows how to create tab navigation with TabNavigator and add a side menu drawer with DrawerNavigator.

Uploaded by

J Robi Atmawijaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views16 pages

React Navigation: Mobile Development

The document discusses React Navigation, a navigation solution for React Native applications. It describes installing React Navigation with NPM and creating a simple navigation structure with multiple screens using StackNavigator. It then shows how to create tab navigation with TabNavigator and add a side menu drawer with DrawerNavigator.

Uploaded by

J Robi Atmawijaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Mobile Development

React Navigation
React Navigation was born from the React
Native community's need for an extensible
yet easy-to-use navigation solution based
on Javascript (click reactnavigation.org).

Installation:
$ npm install react-navigation --save
komponen App.js
Satu.js
Satu.js
Dua.js

index.js
komponen/Satu.js
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

class Satu extends Component {


render() {
return (
<View style={{ flex: 1, alignItems: 'center',
justifyContent: 'center' }}>

<Text>Halaman Satu</Text>
<Button title="Ke Halaman Dua"
onPress={
() => this.props.navigation.navigate('HalDua')}
/>

</View>
);}}

export default Satu;


komponen/Dua.js
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

class Dua extends Component {


render() {
return (
<View style={{ flex: 1, alignItems: 'center',
justifyContent: 'center' }}>
<Text>Halaman Dua</Text>
<Button title="Ke Hal Dua... lagi"
onPress={
() => this.props.navigation.navigate('HalDua')} />
<Button title="Kembali"
onPress={() => this.props.navigation.goBack()} />
</View>
);}}
export default Dua;
App.js
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import Satu from './komponen/Satu';
import Dua from './komponen/Dua';

const RootStack = StackNavigator(


{
HalSatu: {screen: Satu},
HalDua: {screen: Dua},
},
{
initialRouteName: 'HalSatu',
}
);

class App extends Component {


render() {
return (<RootStack />);
}}

export default App;


komponen/Tiga.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Tiga extends Component {


render() {
return (
<View style={{ flex: 1, alignItems: 'center',
justifyContent: 'center' }}>

<Text>Halaman Tiga</Text>

</View>
);}}

export default Tiga;


komponen/Empat.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Empat extends Component {


render() {
return (
<View style={{ flex: 1, alignItems: 'center',
justifyContent: 'center' }}>

<Text>Halaman Empat</Text>

</View>
);}}

export default Empat;


App.js

import React, { Component } from 'react';


import { TabNavigator } from 'react-navigation';

import Tiga from './komponen/Tiga';


import Empat from './komponen/Empat';

export default TabNavigator({


TIGA: { screen: Tiga },
EMPAT: { screen: Empat },
});
komponen/Lima.js
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

class Lima extends Component {


render() {
return (
<View style={{ flex: 1, alignItems: 'center',
justifyContent: 'center' }}>

<Text>Halaman Lima</Text>
<Button title="Buka Menu" onPress={
() => this.props.navigation.navigate('DrawerToggle')}
color={"blue"} />

</View>
);}}

export default Lima;


komponen/Enam.js
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

class Enam extends Component {


render() {
return (
<View style={{ flex: 1, alignItems: 'center',
justifyContent: 'center' }}>

<Text>Halaman Enam</Text>
<Button title="Buka Menu" onPress={
() => this.props.navigation.navigate('DrawerToggle')}
color={"blue"} />

</View>
);}}

export default Enam;


App.js

import React, { Component } from 'react';


import { DrawerNavigator } from 'react-navigation';

import Lima from './komponen/Lima';


import Enam from './komponen/Enam';

export default DrawerNavigator({


LIMA: {
screen: Lima,
},
ENAM: {
screen: Enam,
},
});
Mobile Development

React Navigation

You might also like