React-Navigation 在同一屏幕中显示底部菜单和抽屉菜单答案

【问题标题】：React-Navigation showing Bottom menu and Drawer menu in the same screenReact-Navigation 在同一屏幕中显示底部菜单和抽屉菜单
【发布时间】：2019-04-09 00:18:27
【问题描述】：

我正在使用 React-Navigation，我想要一个底部选项卡菜单和一个抽屉菜单。经过一番摆弄，我想我已经接近但有点卡住了。无论如何，这是我的代码：

import { createStackNavigator, 
   createAppContainer, 
   createBottomTabNavigator,
   createDrawerNavigator
} from 'react-navigation';
//import my screens... etc

class HomeScreen extends React.Component { 

//Other contents.....

//Create my main navigation stacks here
const Home = createStackNavigator({
   HomeScreen,
   Screen1,
   Screen2,
   SettingScreen,
   ProfileScreen,
   //......etc.
});

//navigation stack for the bottom tab menu
const CalendarScreen = createStackNavigator({ myCalendar });
const GraphScreen = createStackNavigator({ myGraph });

//Botton Tab menu
const TabNavigator = createBottomTabNavigator({
   Home, CalendarScreen, GraphScreen
});

//Drawer menu
const DrawerNavigator = createDrawerNavigator(
   {
     Tab: { screen: TabNavigator },
     Setting: { screen: SettingScreen }, 
     Profile: { screen: ProfileScreen }
   },
   {
     drawerWidth: 300,
     drawerPosition: 'right',
   }
);

export default createAppContainer(DrawerNavigator);

}

结果是屏幕加载显示底部菜单，从右侧滑动将打开抽屉菜单。

问题在于它将“Tab”显示为“绘图”菜单中的菜单之一。如果我单击“设置”或“配置文件”，它将关闭/隐藏底部菜单。我必须点击抽屉菜单中的“标签”才能再次显示底部菜单。

我想要实现的是始终显示底部菜单，以及只有“设置”和“配置文件”的抽屉菜单。我怎样才能做到这一点？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

我在使用 React Native 开发时遇到了同样的问题。

我在他们的 (react-navigation) GitHub 和一些 Stack Overflow answares 上阅读了一些问题，但没有什么帮助。我对此的解决方案是用我所有的屏幕创建一个 StackNavigation，然后只用我想放入抽屉的那些屏幕创建一个抽屉导航（不幸的是，这会导致在抽屉中显示“主页”链接的问题）。

这是我的 Routes.js

import HomeScreen from "./components/HomeScreen";
import ProfileScreen from "./components/ProfileScreen";
import AnimalsScreenfrom "./components/AnimalsScreen";
import DoctorsScreenfrom "./components/DoctorsScreen";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";

const BottomNavigator = createStackNavigator(
  {
    Home: { screen: HomeScreen, name: "Home" },
    Profile: { screen: ProfileScreen, name: "Profile" },
    Animals: { screen: AnimalsScreen, name: "Animals" },
    Doctors: { screen: DoctorsScreen, name: "Doctors" }
  },
  {
    headerMode: "none"
  }
);

const AppNavigator = createDrawerNavigator({
  Mapa: BottomNavigator,
  Animals: { screen: AnimalsScreen, name: "Animals" },
  Doctors: { screen: DoctorsScreen, name: "Doctors" }
});
export default AppNavigator;

之后，在我的所有组件中，我手动添加了按钮，就像它们是常规的 BottomTabNavigator 一样。每个按钮都绑定在它们的 onPress 函数上以导航到不同的屏幕，因此它很好地模拟了该函数。

类似这样的东西（它没有样式，只是设置在屏幕底部）：

<View style={{ flex: 1, position: "absolute", bottom: 0 }}>
  <Button
    title="Menu"
    onPress={() => this.props.navigation.openDrawer()}
  />
  <Button
    title="Home"
    onPress={() => this.props.navigation.navigate("Home")}
  />
  <Button
    title="Profile"
    onPress={() => this.props.navigation.navigate("Profile")}
  />
</View>

我的第一个按钮打开抽屉，第二个进入主屏幕，第三个进入 profileScreen，而在我的抽屉中，我有第一个按钮到 Home，第二个到 AnimalsScreen，第三个到 DoctorsScreen

我仍在开发这个应用程序，但你可以在我的 github 存储库中查看代码： React-native-sample-app。部分组件名称不同，但逻辑相同。

希望对你有帮助

【讨论】：