React Native：无法解析模块。 这些文件都不存在：

Question

I am a beginner in React Native so I apologize if this is a noob question. I am trying to learn using this react navigation article and this about react login example . The first article places all the code in App.js while the second one has code in separate pages but is slightly outdated. So my plan was to integrate both examples, using the first article's code but in separate pages instead of putting everything in App.js .

My project structure

The error I got:

None of these files exist:
  * Screen\drawerScreens\settingsScreen(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * Screen\drawerScreens\settingsScreen\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
   6 |
   7 | import HomeScreen from './Screen/drawerScreens/HomeScreen';
>  8 | import SettingsScreen from './Screen/drawerScreens/settingsScreen';
     |                             ^

Some help and tips would be greatly appreciated. Please let me know if more information is required. Thanks in advance.

Answer 1

From your project structure, I could see S is caps in SettingsScreen but you have imported as settingsScreen instead of SettingsScreen

so try importing as

import SettingsScreen from './Screen/drawerScreens/SettingsScreen';

Answer 2

Have you tried adding the file extension?

Ex. './Screen/drawerScreens/settingsScreen.js'

Answer 3

In my case, it was because I copied and dropped the file from Finder (mac). It added an extra space to the end of that folder name. Erase that space worked.

Answer 4

Check if it is exported as default or export const, if it is the 2nd one, then use import { SettingsScreen } instead of import SettingsScreen

Answer 5

The solution for me was reset the react-native cache with the command.

react-native start --reset-cache