gpt4 book ai didi

react-native - React-Navigation 使用选项卡添加抽屉导航

转载 作者:行者123 更新时间:2023-12-03 19:30:56 25 4
gpt4 key购买 nike

我在博览会上使用 react-navigation ("^3.0.9")。

这是我的逻辑流程:

TabView(BottomTabNavigator) with StackNavigatior:

HomeStack
--HomeScreen
...
LinksStack
--LinkScreen
...
SettingsStack
-- Aboutscreen
...

一切正常,但现在我想添加一个抽屉导航(汉堡菜单)如下:
DrawerNavigation View
--HomeScreen(which will show HomeScreen with 3 tabs)
--Screen2 (no tabs)
--Screen3 (no tabs)

我尝试执行以下操作:
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



原始代码是仅导出默认的底部选项卡导航器,例如,
//export default createBottomTabNavigator({
// HomeStack,
// LinksStack,
// SettingsStack,
// }
// );

How do I implement both BottomTabNavigator and DrawerNavigator together?



--代码如下

我的 App.js 调用 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>
);
}
}

AppNavigator 调用 MainTabNavigator
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(createSwitchNavigator({
Main: MainTabNavigator,
}
));

带有 Tab 的 stackNavigator 示例
const HomeStack = createStackNavigator({
Home: HomeScreen,
HomeDetail: HomeDetailScreen
});

HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-home`
: 'md-home'
}
/>
),
};

更新:
我做了一个正确的工作 snack example任何人都可以引用。

最佳答案

您需要在 DrawerNavigator 中添加 tabNavigator。

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

看看 how to open drawer without navigating to the screen from one of the tabs of 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

关于react-native - React-Navigation 使用选项卡添加抽屉导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54643648/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com