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的第三方组件，而不是由自己制造的。

我已尝试按照this answer中的建议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

您需要将其导入为

class client extends AsyncTask<String, Void, Void> {

            Handler handler = new Handler( );

            protected Void doInBackground(String... strings) {


                TextView t3;
                final EditText send;
                send = (EditText) findViewById( R.id.editText );
                t3 = (TextView) findViewById( R.id.textView );

                try {
                    handler.post( new Runnable() {

                        @Override


                        public void run() {
                            Toast.makeText(getApplicationContext(),"start client", Toast.LENGTH_LONG).show();
                        }
                    } );
                    WifiManager manager = (WifiManager) getApplicationContext().getSystemService(WIFI_SERVICE);
                    ip = Formatter.formatIpAddress(manager.getConnectionInfo().getIpAddress());
                    String messag_send=(strings+"<ip>"+ip);


                    sock = new Socket( "192.168.5.178", 5000 );


                    printWriter = new PrintWriter( sock.getOutputStream() );

                    printWriter.write(messag_send);


                    String line = "no";

                    sock.close();
                } catch (UnknownHostException e) {

                } catch (IOException e) {
                    e.printStackTrace();
                }
                return null;
            }







        }

如果仅将其导入为import HomeScreen from './components/HomeScreen.js'，它将尝试获取'./components'或./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”解析模块以获取自定义组件

2 个答案: