如何在没有标签的情况下导航新页面答案

【问题标题】：How to navigate New Page without Tabs react-native如何在没有标签的情况下导航新页面
【发布时间】：2018-07-29 04:33:05
【问题描述】：

我想从选项卡中的页面导航到没有选项卡（或/和标题）的新页面。但从技术上讲，它是用 tabs 和 header 改变和打开的。我不知道该怎么做……这是我项目的目录：

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

App.js 代码：

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 },
  },
);

现在在 Page1 和 Page2 中，我创建了一个类 Page3（在 Page1 中）和 Page4（在 Page4 中）并编写了上面相同的代码，当我想单击文本（使用 StackNavigator）时，页面导航到新组件我想要的！

问题是 Page3 和 Page4 在选项卡中运行，我不想（我想在没有任何选项卡或标题的空白页面中导航它们或...）我可以如何编程要做到这一点？帮我。谢谢:)

【问题讨论】：

Page3 是 Page1 的堆栈兄弟吗？
是的，1-> 3 和 2-> 4

标签： react-native tabs react-navigation tabnavigator

【解决方案1】：

第一步：初始导航和您的屏幕

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

第二步：导航到某个页面

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

【讨论】：

是标签导航器中的“主页”和“个人资料”吗？如果是，那么我认为即使是“个人资料”也会有标签栏。你试过这个吗？
那么你的问题解决了吗？我没有看到对此答案的批准。
@soroush-chehresa 亲爱的 soroush，您的解决方案帮助我添加 StackNavigator，如您所见，我解决了自己的问题。（Damet garme :)）

【解决方案2】：

我找到了解决办法。当我导航到 Page3(4) 并在 navigationOptions 设置 tabBarVisible: false 以隐藏 TabBar 或 header: null 不显示标题时，问题得到解决。这是一个例子：

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
    }}
})

【讨论】：