反应本机堆栈导航错误无法解决stackview

Question

import * as React from "react";
import { View } from "react-native";
import { BackButton } from "react-router-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import ShowData from "./showdata";
import ShowGangs from "./ShowGangs";
import InitialDb from "./initialDb";
import { createStackNavigator } from "@react-navigation/stack";
import { Entypo } from "@expo/vector-icons";
import { TouchableOpacity } from "react-native-gesture-handler";
const Drawer = createDrawerNavigator();
const DashBoardStack = createStackNavigator();
const ShowGangsStack = createStackNavigator();
const ShowCriminalsStack = createStackNavigator();
const DashBoardStackScreen = ({ navigation }) => (
  <DashBoardStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#009387",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
    }}
  >
    <DashBoardStack.Screen
      name="DashBoard"
      component={InitialDb}
      options={{
        title: "Dashboard",
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.openDrawer()}>
            <Entypo name="menu" size={24} color="black" />
          </TouchableOpacity>
        ),
      }}
    />
  </DashBoardStack.Navigator>
);
const ShowGangsStackStackScreen = ({ navigation }) => (
  <ShowGangsStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#009387",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
    }}
  >
    <ShowGangsStack.Screen
      name="ShowGangs"
      component={ShowGangs}
      options={{
        title: "Gangs",
      }}
    />
  </ShowGangsStack.Navigator>
);
const ShowCriminalsStackScreen = ({ navigation }) => (
  <ShowCriminalsStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#009387",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
    }}
  >
    <ShowCriminalsStack.Screen
      name="ShowCriminals"
      component={ShowData}
      options={{
        title: "Criminals",
      }}
    />
  </ShowCriminalsStack.Navigator>
);
export default class DashBoard extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <BackButton />

        <Drawer.Navigator initialRouteName="DashBoard">
          <Drawer.Screen name="DashBoard" component={DashBoardStackScreen} />
          <Drawer.Screen
            name="ShowGangs"
            component={ShowGangsStackStackScreen}
          />
          <Drawer.Screen
            name="ShowCriminals"
            component={ShowCriminalsStackScreen}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

在上面的代码中，我试图使用react导航实现堆栈和抽屉导航。但我收到以下错误：

“无法解析“ node_modules @ react-navigation \ stack \ src \ index.tsx”中的“ ./views/Stack/StackView” 无法构建JavaScript捆绑包。 无法解析“ node_modules @ react-navigation \ stack \ src \ index.tsx”中的“ ./views/assets/back-icon.png” 无法构建JavaScript捆绑包。 无法从“ node_modules @ react-navigation \ stack \ src \ index.tsx”解析“ ./views/assets/back-icon-mask.png” 无法构建JavaScript捆绑包。 无法从“ node_modules @ react-navigation \ stack \ src \ navigators \ createStackNavigator.tsx”解析“ ../views/Stack/StackView” 无法构建JavaScript捆绑包。 无法通过“ node_modules @ react-navigation \ stack \ src \ index.tsx”解析“ ./views/Stack/StackView” **