How the Navigation sample Works
==============================================================
1. install react-navigation using
npm install react-navigation or
yarn add react-navigation
2. Folder Struncture should like below
NavigationTest
.
...assets
TabBarIcon.js
Color.js
...navigation
MainNavigation.js
...screens
HomeScreen.js
ProfileScreen.js
HomeScreen2.js
ProfileScreen2.js
App.js
2. Create some native components called
HomeScreen.js
ProfileScreen.js
HomeScreen2.js
ProfileScreen2.js
in a folder called "Screen" .
At the bottom area, you can see the samples.
3. Create
TabBarIcon.js , Color.js in the asset folder
4. Create
MainNavigation.js in the navigation folder.
5. Scripts
MainNavigation.js file
=================================================================
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer, createBottomTabNavigator,
createDrawerNavigator } from 'react-navigation';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import ProfileScreen from '../screens/ProfileScreen';
import HomeScreen2 from '../screens/HomeScreen2';
import ProfileScreen2 from '../screens/ProfileScreen2';
import HomeScreen from '../screens/HomeScreen';
import TabBarIcon from '../assets/TabBarIcon';
//Create Staks for each menu items you need
const TabHome = createStackNavigator({
Home: {screen: HomeScreen},
});
//Add navigation options like below to manage, Icon, titles to your menu item
TabHome.navigationOptions = {
tabBarLabel: 'Home in SUB 1',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-pulse'
}
/>
),
};
//Create Staks for each menu items you need. In here we didn't add a navigation
options
const TabProfile = createStackNavigator({
Profile: {screen: ProfileScreen},
});
//Create Staks for each menu items you need
//Create Staks for each menu items you need
//Create the Navigator types for your Menu items.
const DrawHome2 = createStackNavigator({
Home: {screen: HomeScreen2},
});
//Add navigation options like below to manage, Icon, titles to your menu item
DrawHome2.navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-pulse'
}
/>
)
};
const DrawProfile2 = createStackNavigator({
Profile: {screen: ProfileScreen2},
});
//Add navigation options like below to manage, Icon, titles to your menu item
DrawProfile2.navigationOptions = {
tabBarLabel: 'Home in SUB 1',
drawerIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-pulse'
}
/>
),
};
//In here Menu Items "TabHome"', and "TabProfile", put into a TabNavigator,
// which you can see at the bottom of the Screen
const TabNav = createBottomTabNavigator(
{
TAB1: TabHome,
TAB2: TabProfile,
}
)
//Create the Navigator types for your Menu items.
//In here Menu Items "DrawHome2"', and "DrawProfile2", put into a DrawerNavigator,
// which you can see by pulling it from the left side.
const DrawNav = createDrawerNavigator(
{
DRAW1: DrawHome2,
DRAW2: DrawProfile2,
}
)
// Now Add all the Navigators to a Switch Navigator. By using this, you can
// simply switch between each navigator types by using
// this.props.navigation.navigate('Sub1');
or
// this.props.navigation.navigate('Sub2');
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Sub1: TabNav,
Sub2: DrawNav,
},
{
initialRouteName: 'Sub2', // You can set the default Sub menu from here.
}
));
===================================================
App.js file
====================================================
import React from 'react';
import MainNavigation from './navigation/MainNavigation';
export default function App() {
return (
<MainNavigation/>
);
}
=====================================================
TabBarIcon.js file
======================================================
import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import Colors from './Colors';
export default function TabBarIcon(props) {
return (
<Ionicons
name={props.name}
size={26}
style={{ marginBottom: -3 }}
color={props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
=====================================================
Color.js
======================================================
const tintColor = '#2f95dc';
export default {
tintColor,
tabIconDefault: '#ccc',
tabIconSelected: tintColor,
tabBar: '#fefefe',
errorBackground: 'red',
errorText: '#fff',
warningBackground: '#EAEB5E',
warningText: '#666804',
noticeBackground: tintColor,
noticeText: '#fff',
};
===========================================================================
HomeScreen.js
===========================================================================
import React from 'react';
import {View, Text, Button} from 'react-native';
export default class HomeScreen extends React.Component {
render(){
return(
<View>
<Text> Home screen Woow </Text>
<Button title="GoTo Sub2" onPress={this.GoToSub2}/>
</View>
);
}
GoToSub2 = ()=>{
this.props.navigation.navigate('Sub2');
}
}
===========================================================================
===========================================================================
import React from 'react';
import {View, Text, Button} from 'react-native';
export default class HomeScreen2 extends React.Component {
render(){
return(
<View>
<Text> Home screen </Text>
<Button title = "Goto Sub 1" onPress={this._GoToSub1Async}></Button>
</View>
);
}
static navigationOptions = {
title: 'Lots of features here',
};
_GoToSub1Async = () => {
this.props.navigation.navigate('Sub1');
};
}
===========================================================================
ProfileScreen.js
===========================================================================
import React from 'react';
import {View, Text} from 'react-native';
const ProfileScreen = () => {
return(
<View>
<Text> ProfileScreen screen </Text>
</View>
);
}
export default ProfileScreen;
===========================================================================
ProfileScreen2.js
===========================================================================
import React from 'react';
import {View, Text} from 'react-native';
const ProfileScreen2 = () => {
return(
<View>
<Text> ProfileScreen screen 2 </Text>
</View>
);
}
export default ProfileScreen2;
