React-Navigation混合导航如何将Drawer菜单移至标题栏并删除重复底部菜单

不需要重新设计导航结构，仅调整现有配置即可实现需求，修改步骤如下：

需求1：将Drawer中的dashboard菜单移到抽屉标题栏右侧，同时隐藏Drawer列表中的dashboard项 #

修改navigation/DrawerNavi.js文件，自定义抽屉内容，隐藏原有的dashboard菜单项，在抽屉头部新增右侧跳转按钮：

// 替换你的navigation/DrawerNavi.js完整代码
import { View, Text, TouchableOpacity } from 'react-native';
import IndexTap from "../components/Index";
import Contact from "../components/Contact";
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

// 自定义抽屉头部
const CustomDrawerHeader = ({ navigation }) => {
  return (
    <View style={{ 
      padding: 16, 
      flexDirection: 'row', 
      justifyContent: 'space-between', 
      alignItems: 'center', 
      borderBottomWidth: 1, 
      borderBottomColor: '#e5e5e5' 
    }}>
      <Text style={{ fontSize: 18, fontWeight: '600' }}>应用菜单</Text>
      {/* 右侧Dashboard跳转按钮 */}
      <TouchableOpacity 
        onPress={() => {
          navigation.closeDrawer();
          navigation.navigate('dashboard from drawerNavi', { screen: 'DashBoard' });
        }}
        style={{ paddingHorizontal: 12, paddingVertical: 6, backgroundColor: '#f3f4f6', borderRadius: 4 }}
      >
        <Text>Dashboard</Text>
      </TouchableOpacity>
    </View>
  )
}

// 自定义抽屉整体内容
const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <CustomDrawerHeader navigation={props.navigation} />
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  )
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      initialRouteName="dashboard from drawerNavi"
    >
      <Drawer.Screen
        name="dashboard from drawerNavi"
        component={IndexTap}
        options={{
          // 隐藏该菜单项，不显示在抽屉列表中
          drawerItemStyle: { display: 'none' },
          headerShown: false
        }}
      />
      <Drawer.Screen 
        name="Contact" 
        component={Contact}
        options={{ headerShown: false }} 
      />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;

需求2：移除底部导航栏中重复的Dashboard菜单 #

修改components/Index.js文件，给Dashboard的Tab项添加tabBarButton配置，不渲染对应的底部按钮即可：

// 替换你的components/Index.js完整代码
import DashBoard from './DashBoard';
import Profile from './Profile';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tap = createBottomTabNavigator();

class IndexTap extends Component {
  render() {
    return (
      <Tap.Navigator
        initialRouteName="DashBoard"
        screenOptions={{ headerShown: false }}
      >
        <Tap.Screen
          name="DashBoard"
          component={DashBoard}
          options={{
            // 不渲染该Tab的底部按钮，不会出现在底部导航栏
            tabBarButton: () => null
          }}
        />
        <Tap.Screen
          name="Profile"
          component={Profile}
        />
      </Tap.Navigator>
    )
  }
}

export default IndexTap;

补充说明 #

如果你不需要保留底部Tab对Dashboard的跳转能力，也可以直接删掉<Tap.Screen name="DashBoard" ... />的配置，把底部导航的initialRouteName改成Profile即可，根据你的业务需求选择即可。

内容的提问来源于stack exchange，提问作者Miguel