Question

AppNavigator.js

import React from 'react';
import { createSwitchNavigator,createStackNavigator, createAppContainer} from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';
import AuthLoadingScreen from '../screens/AuthLoadingScreen'
import Login from '../screens/Login';
import SideBarNavigator from './SideBarNavigator'


export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen ,
    App: MainTabNavigator,
    Auth: Login,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

MainTabNavigator.js

    import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator,createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import SideBarNavigator from './SideBarNavigator';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

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

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});


SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};



export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
}

）;

SideBarNavigator.js

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator,createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const HomeStacks = createStackNavigator({
  Home: HomeScreen,
});

HomeStacks.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

const LinksStacks = createStackNavigator({
  Links: LinksScreen,
});

LinksStacks.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),
};

const SettingsStacks = createStackNavigator({
  Settings: SettingsScreen,
});


SettingsStacks.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};



export default createDrawerNavigator({
  HomeStacks,
  LinksStacks,
  SettingsStacks,
});

我想做的是将Drawer（SideBar.js）和TabNav（MainNav.js）都放在同一页面上。

在初始页面上，它看起来像android上的GoogleMaps。您可以在其中访问“抽屉侧栏”和底部的三个链接。

我如何实现这样的目标？

我试图弄混MainTabNavigator，但是我什么也无法工作。

Answer 1

在MainNavigator中将抽屉导航器保留为SwitchNavigator，并将TabNavigator内的MainNavigator包裹为initialRoute，并在抽屉中有一个自定义组件您不希望将“首页”显示为抽屉内选项卡的可点击链接。

代码应如下所示：

export default createSwitchNavigator({
   AuthLoading: AuthLoadingScreen ,
   App: MainNavigator,
   Auth: Login,
}, {
  initialRouteName: 'AuthLoading',
});

如果您想欢迎用户使用带有抽屉的标签，那么您的MainNavigator应该是一个抽屉。

const MainNavigator = createDrawerNavigator({
   Home: { screen: MyTabs},
   Notifications: { screen: MyNotificationsScreen }
}, {
   contentComponent: props =>  <MyCoolCustomDrawerComponent {...props} /> //optional
});

，最后MyTabs应该是您的TabNavigator。

通过这种方式可以实现您想要的。

注意：为了以这种方式嵌套导航器，请在DrawerNavigator之前声明并定义TabNavigator，在SwitchNavigator之前声明并定义DrawerNavigator。

希望这会有所帮助。快乐编码：）

React Native-多个导航器（同一页面上的抽屉和底部标签）？

1 个答案: