CODEWITHSUNDEEP
react-nativetabsreact-navigationtabnavigator
Hamed Keshavarz M
Hamed Keshavarz M

Reputation: 475

How to navigate New Page without Tabs react-native

I want to navigate from the page in tabs to the new page without tabs ( or/and header) . but technically it is changed and opened with the tabs and header . I don't know how can do this... it's my project's directory :

.
. 
.
src
  -components
    -Page1.js
    -Page2.js
App.js
.
.
.

the App.js codes:

import { TabNavigator } from 'react-navigation';
import Page 1 from './components/Page1';  
import Page 2 from './components/Page2';

export default TabNav = TabNavigator (
  {
    Page1: { screen: Page1 },
    Page2: { screen: Page2 },
  },
);

and now in Page1 & Page2 I create a class Page3(in Page1) and Page4(in Page4) and coding the same codes above and when I want to click to the text (with StackNavigator) the page navigate to the new component that I want!

the problem is that the Page3 & Page4 run in the Tab and I don't want (I wanna navigate them in blank page without any Tabs or Header or...) how I can programming to do that? help me. thanks :)

Upvotes: 1

Views: 4459

Answers (2)

Hamed Keshavarz M
Hamed Keshavarz M

Reputation: 475

I find a solution. problem is solved when I navigate to the Page3(4) and in navigationOptions set tabBarVisible: false to hide TabBaror header: null for not showing Header. here is the example:

import { StackNavigator } from 'react-navigation';
import Page2 from './../pages/Page2';
import Page4 from "../pages/Page4";

export default Home= StackNavigator ({

    Page2: { screen : Page2},
    Page4: { screen: Page4,
    navigationOptions:{
        tabBarVisible: false,
        header: null
    }}
})

Upvotes: 3

user7185050
user7185050

Reputation:

step one: initial navigation and your screens

import { StackNavigator, } from 'react-navigation'; 
const App = StackNavigator({ 
  Home: { screen: HomeScreen }, 
  Profile: { screen: ProfileScreen }, 
});

step two: navigate to some page

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' }) } />
    ); 
  } 
}

Upvotes: 1

Related Questions