无法从 'index.js' 解析自定义组件的模块

Question

我是 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)
        }
    }
}

Answer 1

您需要将其导入为

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

如果您仅将其导入为 './components'，它会尝试获取 ./components.js 或 ./components/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)

第一行带 * - 尝试获取 ./components.js 和其他扩展名
第二行带 * - 尝试获取 ./components/index.js 和其他扩展名

Answer 2

我通过更改解决了@Vencovsky 回答后的第二个问题：

export class HomeScreen extends React.Component

收件人：

export default class HomeScreen extends React.Component

在 GitHub 阅读此 answer / comment 后。

无法从 'index.js' 解析自定义组件的模块

Unable to resolve module from 'index.js' for custom component

reactjs

react-native

react-navigation

react-navigation-stack