我尝试在react native learning中从一个单独的文件导入组件，但是它们都出错了，我在几个论坛和社区中寻找解决方案，但是我找不到解决方案，我的语法有什么问题吗？

**问题：**这是我的问题，在我的项目，你可以帮助一些一个解决方案，

ERROR  [Error: undefined Unable to resolve module ./src/Components/MenuBar from D:\PROGRAMMING\Belajar\JavaScript\React Navive\kesehatan_ui\App.js:
None of these files exist:
  * src\Components\MenuBar(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)  * src\Components\MenuBar\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)  1 | import React, { useState, useEffect } from "react";
  2 | import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
> 3 | import MenuBar from "./src/Components/MenuBar";
    |                      ^
  4 | const App = () => {
  5 |   const mainBlue = "#0082F7";
  6 |   const mainBlack = "#34354e";]
error: Error: Unable to resolve module ./src/Components/MenuBar from D:\PROGRAMMING\Belajar\JavaScript\React Navive\kesehatan_ui\App.js:

应用程序js

这是我在App.js中的代码，我已经在指向的目录中正确导入了文件，即MenuBar.js，但仍然错误

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import MenuBar from "./src/Components/MenuBar";
const App = () => {
  const mainBlue = "#0082F7";
  const mainBlack = "#34354e";
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1 }}></View>
      <MenuBar />
    </View>
  );
};
const styles = StyleSheet.create({
  iconBtn: {
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: "blue",
    flex: 1,
  },
});

export default App;

在MenuBar.js上

import React from "react";
import { Text, View } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

const MenuBar = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        backgroundColor: "#fff",
        elevation: 3,
        paddingTop: 10,
        paddingBottom: 10,
      }}
    >
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="home" size={22} color={mainBlue} />
        <Text style={{ fontSize: 12, color: mainBlue }}>Home</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="calendar" size={22} color={mainBlack} />
        <Text style={{ fontSize: 12, color: mainBlack }}>Jadwal</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="chatbubble-ellipses" size={22} color={mainBlack} />
        <Text style={{ fontSize: 12, color: mainBlack }}>Pesan</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="person" size={22} color={mainBlack} />
        <Text style={{ fontSize: 12, color: mainBlack }}>Profile</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MenuBar;

[myDirectory][1]

Syntax Error