javascript - 构建一个结合 Stack 和 Drawer 的 TabNavigator
问题描述
我目前已经构建了这些导航器:
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: {backgroundColor: theme['primaryColor']},
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Swipe" component={SwipeScreen} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
return (
<Root>
<NavigationContainer>
<Drawer.Navigator
screenOptions={{swipeEnabled: false}}
drawerContent={(props) => <SidebarComponent {...props} />}
initialRouteName="Login">
<Drawer.Screen name="List" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
</Root>
);
我需要另外添加一个 TabNavigator 到“滑动”屏幕,以便我可以再构建 3 个屏幕并在它们上滑动
解决方案
您可以TabNavigator
使用所需的屏幕创建一个。然后将其包含在您的MainStackNavigator
而不是Swipe
屏幕组件中。
首先,您可以TabNavigator
像这样创建自己的。
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
<Tab.Screen name="Screen3" component={Screen3} />
</Tab.Navigator>
);
};
然后,将它包含在您的MainStackNavigator
而不是Swipe
像这样的屏幕组件中。
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: { backgroundColor: theme['primaryColor'] },
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Tabs" component={TabNavigator} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
如果您对此有任何问题,请在此处发表评论。
推荐阅读
- ember.js - 未捕获的 TypeError:scope.observeChanges 不是函数
- sql - 如何在 Postgres 函数中存储日期变量?
- javascript - 在 forEach 循环中修改对象属性
- drupal-8 - drupal 8中视图节点上基于角色的访问控制
- python - Kivy:单选按钮正确实现
- python - 使用相同掩码的 ndarray 的布尔掩码内部尺寸
- python - 为 root 用户安装 pip 库
- java - 在数据源中创建了不需要的空表
- html - 如何在弹性框中将一个元素的中心与另一个元素的基线对齐
- arrays - 从 React onClick 中的数组中删除当前索引