如何使用 createStackNavigator 将 createBottomTabNavigator 添加到同一屏幕

Posted 2023-02-19

【中文标题】如何使用 createStackNavigator 将 createBottomTabNavigator 添加到同一屏幕

【英文标题】：How to add createBottomTabNavigator to same screen with createStackNavigator

【发布时间】：2019-08-04 23:05:16

【问题描述】：

在我的主屏幕上（我使用 App.js 作为我的主屏幕），我有 createStackNavigator 和 createAppContainer 来使用 React-Navigation 映射所有屏幕。它起作用了，我可以从任何屏幕显式导航到这些屏幕中的任何一个。现在我想用“createBottomTabNavigator”在主屏幕上添加一个底部标签导航栏。

这是我的代码的简化版本：

import  createStackNavigator, createAppContainer, createBottomTabNavigator   from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';

class HomeScreen extends React.Component 
   render() 
      return (
         <View><Text>Welcome</Text></View>
      );
   
 

 const AppNavigator = createStackNavigator(
   Home:  screen: HomeScreen ,
   Screen1:  screen: Screen1 ,
   Screen2:  screen: Screen2 ,
   Screen3:  screen: Screen3 ,
 );

 export default createAppContainer(AppNavigator);

我想在底部添加一个导航栏，如下所示：

const TabNavigator = createBottomTabNavigator(
   Home:  screen: HomeScreen ,
   Screen3:  screen: Screen3 ,
);

export default createAppContainer(TabNavigator);

它不允许在同一页面内有两个“导出默认值”。如何添加“createBottomTabNavigator”，同时保留“createStackNavigator”来映射我的所有屏幕？

【参考方案1】：

您可以使用如下代码：

import  createStackNavigator, createAppContainer, createBottomTabNavigator  from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';

class HomeScreen extends React.Component 
  render() 
    return (
       <View><Text>Welcome</Text></View>
    );
  


const AppNavigator = createStackNavigator(
  Home:  screen: TabNavigator ,
  Screen1:  screen: Screen1 ,
  Screen2:  screen: Screen2 ,
  Screen3:  screen: Screen3 ,
);

const TabNavigator = createBottomTabNavigator(
  Home:  screen: HomeScreen ,
  Screen3:  screen: Screen3 ,
);

export default createAppContainer(AppNavigator);

【参考方案2】：

类似的东西。

import  createStackNavigator, createAppContainer, createBottomTabNavigator  from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
import Screen4 from './Screens/Screen4';

const Home = createStackNavigator(
  Screen1, Screen2
);

const List = createStackNavigator(
  Screen3, Screen4
);

const TabNav = createBottomTabNavigator(
  Home, List
);

export default createAppContainer(TabNav);

您的 Home 可以是 Screen1 和 Screen2 可以是 Screen1 的一个项目，Screen3 and Screen4 也是如此

【讨论】：

只是一个问题，当您为“主页”声明多个屏幕，然后将“主页”添加到 BottomTabNavigator 时，“主页”选项卡是否始终导航到您声明的第一个屏幕“家”？

首先它会像往常一样导航到第一个屏幕，此处以 screen1 为例，但如果您想添加更多屏幕，您只需将其添加到您的主堆栈中，就像 Screen1、Screen2、Screen3 .然后，如果您需要它导航到某个屏幕示例 Screen3，您只需调用 this.props.navigation.navigate('Screen3', name: 'somename');当你点击某个按钮时