反应导航在同一屏幕中显示底部菜单和抽屉菜单

Question

我正在使用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"显示为"绘图"菜单中的菜单之一。 如果我单击"设置"或"配置文件"，它将关闭/隐藏底部菜单。 我不得不单击抽屉菜单中的"选项卡"以使底部菜单再次显示。

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

Answer 1

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

我在他们的(反应导航)GitHub和一些Stack Overflow反软件上阅读了一些问题，但没有任何帮助。 我的解决方案是创建一个包含我所有屏幕的 StackNavigation，然后只创建一个抽屉导航，其中包含我想放入抽屉的那些(不幸的是，这保留了在抽屉中显示"主页"链接的问题)。

这是我的路线.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>

我的第一个按钮打开抽屉，第二个按钮转到主屏幕，第三个按钮打开个人资料屏幕，而在我的抽屉里，我有第一个按钮到主页，第二个按钮打开动物屏幕，第三个按钮

打开医生屏幕我仍在开发这个应用程序，但您可以在我的 github 存储库中检查代码： 反应原生样本应用。某些组件名称不同，但逻辑相同。

希望对你有帮助