无法从“ index.js”解析模块以获取自定义组件

我是新手，react-native目前正在尝试stack-navigator向我的应用中添加：

// import React from 'react';
import {Text, View, AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

// class HomeScreen extends React.Component {
//   static navigationOptions = {
//     title: 'Welcome',
//   };
//   render() {
//     return (
//       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
//         <Text>Home Screen</Text>
//       </View>
//     );
//   }
// }

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen}
}, {
  initialRouteName: 'Home'
})

const NavigationApp = createAppContainer(MainNavigator);

AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)

export default NavigationApp

如果我在上面的示例中取消注释了注释的代码，那么一切正常，现在我正尝试将HomeScreen组件移至其自己的文件，因此尝试了以下操作：

HomeScreen.js

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

index.js

import HomeScreen from './components'
import {AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen}
}, {
  initialRouteName: 'Home'
})

const NavigationApp = createAppContainer(MainNavigator);

AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)

export default NavigationApp

但我不断收到此错误：

error: bundling failed: Error: Unable to resolve module `./components` from `index.js`: 

None of these files exist:
  * components(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * components/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
    at Object.resolve (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)
    at /Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

过去，我可以像以前一样导入它们，但是不知何故react-navigation给我带来了麻烦。

我的文件夹结构如下：

/
    index.js
    components/
        HomeScreen.js

我见过类似的问题，但它们都涉及第三方组件，react但不是由自己创建的。

我试图npm start --reset-cache按照这个答案的建议

如果有问题，我正在使用这些版本。

react-native-cli: 2.0.1
react-native: 0.61.2

如何解决这个错误？

在遵循@Vencovsky提出的解决方案之后（带有和不带有.js扩展名）：

import HomeScreen from './components/HomeScreen.js'

我收到这个新错误：

The component for route 'Home' must be a React component. For example:

import MyScreen from './MyScreen';
...
Home: MyScreen,
}

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
Home: MyNavigator,
}

我称这个React应用程序的方式是通过Swift桥进行的：

import Foundation
import UIKit
import React

class ButtonController: UIViewController  {
    @IBOutlet weak var button: UIButton!

    @IBAction func buttonClicked(_ sender: Any) {
        if let jsBundleLocation = URL(string: "http://X.X.X.X:8081/index.bundle?platform=ios") {
            //The data is used as initialProperties to React Native App.
            let data:NSDictionary = ["onNavigationStateChange": "{handleNavigationChange}",
                                     "uriPrefix":"/app"]; //We can use this parameter to pass the data to the React native App from the Native App.
            //The RCTRootView is a native view used to host React-managed views within the app. Can be used just like any ordinary UIView.
            let rootView = RCTRootView(
                bundleURL: jsBundleLocation,
                moduleName: "ReactNativeApp",
                initialProperties: data as [NSObject : AnyObject],
                launchOptions: nil)
            let viewController = UIViewController()
            viewController.view = rootView
            self.present(viewController, animated: true, completion: nil)
        }
    }
}