React-Navigation 使用选项卡添加抽屉式导航 [英] React-Navigation adding drawer navigation with tab
问题描述
我在 expo 中使用 react-navigation ("^3.0.9").
这是我的逻辑流程:
TabView(BottomTabNavigator) 与 StackNavigatior:家庭堆栈- 主屏幕...链接堆栈--LinkScreen...设置堆栈-- 关于屏幕...
一切正常,但现在我想添加一个抽屉导航(汉堡菜单),如下所示:
抽屉导航视图--HomeScreen(将显示带有 3 个选项卡的 HomeScreen)--Screen2(无标签)--Screen3(无标签)
我尝试执行以下操作:
export const Tab = createBottomTabNavigator({家庭堆栈,链接堆栈,设置堆栈,});导出 const Drawer = DrawerNavigator({主屏幕:{屏幕:主屏幕},屏幕2:{屏幕:屏幕2},屏幕3:{屏幕:屏幕3},});
<块引用>
他们返回的未定义错误不是函数
原来的代码是只导出默认的底部标签导航器,
//导出默认createBottomTabNavigator({//家庭堆栈,//链接堆栈,//设置堆栈,//}//);
<块引用>
如何同时实现 BottomTabNavigator 和 DrawerNavigator?
--代码如下
调用 AppNavigator 的我的 App.js
render() {if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {返回 (<应用加载startAsync={this._loadResourcesAsync}onError={this._handleLoadingError}onFinish={this._handleFinishLoading}/>);} 别的 {返回 (<查看样式={styles.container}>{Platform.OS === 'ios' &&<StatusBar barStyle="默认"/>}<应用导航器/></查看>);}}
哪个 AppNavigator 调用 MainTabNavigator
import { createAppContainer, createSwitchNavigator } from 'react-navigation';从'./MainTabNavigator'导入MainTabNavigator;导出默认 createAppContainer(createSwitchNavigator({主要:MainTabNavigator,}));
我的带有 Tab 的 stackNavigator 示例
const HomeStack = createStackNavigator({主页:主屏幕,首页详情:首页详情屏幕});HomeStack.navigationOptions = {tabBarLabel: '首页',tabBarIcon: ({focused }) =>(
更新:我已经做了一个正确的工作 小吃示例,任何人都可以从中参考.
需要在 DrawerNavigator 中添加 tabNavigator.
const ProfileNavigator = createDrawerNavigator({抽屉:DashboardTabNav}, {initialRouteName: '抽屉',内容组件:示例屏幕,抽屉宽度:300});//可能的屏幕清单const PrimaryNav = createStackNavigator({DashboardScreen:{屏幕:ProfileNavigator},登录屏幕:{屏幕:登录屏幕},启动屏幕:{屏幕:启动屏幕},更新用户屏幕:{屏幕:更新用户屏幕}}, {//所有屏幕的默认配置headerMode: '无',initialRouteName: '登录屏幕',导航选项:{headerStyle:样式.header}});导出默认 createAppContainer(PrimaryNav);
看看 如何在不从 tabnavigator 的选项卡之一导航到屏幕的情况下打开抽屉?或者https://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2另请参阅 https://gitlab.com/readybytes/ReactNavigationExampleVersion2
I'm using react-navigation ("^3.0.9") with expo.
This is my logic flow:
TabView(BottomTabNavigator) with StackNavigatior:
HomeStack
--HomeScreen
...
LinksStack
--LinkScreen
...
SettingsStack
-- Aboutscreen
...
Everything works ok, but now I would like to add a drawer navigation (hamburger menu) as follows:
DrawerNavigation View
--HomeScreen(which will show HomeScreen with 3 tabs)
--Screen2 (no tabs)
--Screen3 (no tabs)
Which I tried to do the following:
export const Tab = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
}
);
export const Drawer = DrawerNavigator({
HomeScreen: { screen: HomeScreen },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
});
which they returned an error of undefined is not a function
the original code was to export the default bottom tab navigator only like,
//export default createBottomTabNavigator({
// HomeStack,
// LinksStack,
// SettingsStack,
// }
// );
How do I implement both BottomTabNavigator and DrawerNavigator together?
--Code as below
My App.js which calls AppNavigator
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
}
which AppNavigator calls MainTabNavigator
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
export default createAppContainer(createSwitchNavigator({
Main: MainTabNavigator,
}
));
an example of my stackNavigator with Tab
const HomeStack = createStackNavigator({
Home: HomeScreen,
HomeDetail: HomeDetailScreen
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-home`
: 'md-home'
}
/>
),
};
Update: I have done a correct working snack example in which anyone can reference from.
You need to add the tabNavigator inside the DrawerNavigator.
const ProfileNavigator = createDrawerNavigator({
Drawer: DashboardTabNav
}, {
initialRouteName: 'Drawer',
contentComponent: ExampleScreen,
drawerWidth: 300
});
// Manifest of possible screens
const PrimaryNav = createStackNavigator({
DashboardScreen: { screen: ProfileNavigator },
LoginScreen: { screen: LoginScreen },
LaunchScreen: { screen: LaunchScreen },
UpdateUserScreen: { screen: UpdateUserScreen }
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'LoginScreen',
navigationOptions: {
headerStyle: styles.header
}
});
export default createAppContainer(PrimaryNav);
Take a look at how to open drawer without navigating to the screen from one of the tabs of tabnavigator? or https://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2 Also for full example take a look at https://gitlab.com/readybytes/ReactNavigationExampleVersion2
这篇关于React-Navigation 使用选项卡添加抽屉式导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!