react-native - React-Navigation 在同一屏幕中显示底部菜单和抽屉菜单
问题描述
我正在使用 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);
}
结果是屏幕加载显示底部菜单,从右侧滑动将打开抽屉菜单。
问题在于它将“选项卡”显示为“绘图”菜单中的菜单之一。如果我单击“设置”或“配置文件”,它将关闭/隐藏底部菜单。我必须单击抽屉菜单中的“选项卡”才能再次显示底部菜单。
我想要实现的是始终显示底部菜单,以及只有“设置”和“配置文件”的抽屉菜单。我怎样才能做到这一点?
解决方案
我在使用 React Native 开发时遇到了同样的问题。
我在他们的(react-navigation)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>
我的第一个按钮打开抽屉,第二个到 HomeScreen,第三个到 profileScreen,而在我的抽屉里,我有第一个按钮到 Home,第二个到 AnimalsScreen,第三个到 DoctorsScreen
我仍在开发这个应用程序,但您可以查看我的 github 存储库中的代码: React-native-sample-app。有些组件名称不同,但逻辑相同。
希望能帮助到你
推荐阅读
- javascript - 为什么javascript reduce函数输出字符串数组
- php - PHP如何使用html表格按钮从数据库中删除特定行
- css - 避免与 CSS 网格重叠的项目(在 IE11 中)
- python - C ++ - argsort 的矢量版本实现与 numpy 中的相比效率低
- objective-c - 使用 clang 编译时无法解析引用 macOS SDK 标头
- r - 结合选择助手和谓词函数在 dplyr 中进行变异
- laravel - Laravel 与自定义表名和 ID 的多对多关系
- php - 带有消息“transaction_amount”属性的“MercadoPagoException”不能为空
- css - 更新 Windows 10 引导 css 后未加载
- php - 可以将多个域路由到不同的 CodeIgniter 模块或控制器吗?