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

}

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

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

我要实现的是始终显示“底部”菜单，以及仅包含“设置”和“配置文件”的抽屉菜单。我该如何实现？

Answer 1

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

我在（反应导航）的GitHub和一些Stack Overflow的软件上阅读了一些问题，但是没有什么帮助。为此，我的解决方案是先创建一个带有所有屏幕的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。某些组件名称不同，但逻辑相同。

希望有帮助

在同一屏幕上显示底部菜单和抽屉菜单的React-Navigation

1 个答案: