React-Native错误：无法从“ index.js”解析模块“ / screen / Welcome”：

问题描述

我该如何解决这个问题？

我只是想使用路由器来切换屏幕，但是
我在ios模拟器上收到此错误： error screenshoot 结构：Structure

[Sun Aug 16 2020 01:36:26.597]  BUNDLE  ./index.js 

error: Error: Unable to resolve module `/screens/Welcome` from `index.js`: 

None of these files exist:
  * ../../../../screens/Welcome(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * ../../../../screens/Welcome/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/erenberkay/Desktop/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/erenberkay/Desktop/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/erenberkay/Desktop/app/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/Users/erenberkay/Desktop/app/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /Users/erenberkay/Desktop/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/erenberkay/Desktop/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /Users/erenberkay/Desktop/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/erenberkay/Desktop/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

index.js

    import {AppRegistry} from 'react-native';
    import App from './App';
    import {name as appName} from './app.json';

AppRegistry.registerComponent(appName,() => App);

Welcome.js

import React from 'react';
import {
  SafeAreaView,StyleSheet,Image,ScrollView,View,Text,StatusBar,} from 'react-native';

import {
  Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';

export default class Welcome extends React.Component {

    render(){

        return(

  <View style={styles.container}>

    <Text>Welcome</Text>
    
  </View>
    
    )

    }

};

const styles = StyleSheet.create({

container: {
flex:1,backgroundColor:'yellow',alignItems:'center',justifyContent:'center'


}
  
});

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,ImageBackground,TextInput,TouchableOpacity,} from 'react-native/Libraries/NewAppScreen';

import Router from './src/Router';
import EntypoIcon from "react-native-vector-icons/Entypo";

export default class App extends React.Component {

  render(){

  return(<Router/>)

  }

};

const styles = StyleSheet.create({

container: {
flex:1,justifyContent:'center'


}
  
});

Router.js

import React from 'react';

import {
    createSwitchNavigator,createAppContainer,} from 'react-navigation';

import Welcome from '/screens/Welcome';
import Register from 'screens/Register';
import Login from '/screens/Login';

const AppSwitchNavigator = createSwitchNavigator(
    {

        Welcome: {
            screen : Welcome
        },Register: {
            screen : Register
        },Login: {
            screen : Login
        }

    },{
        initialRouteName: 'Welcome'
    }
);

export default createAppContainer(AppSwitchNavigator);

版本

• “反应”：“ 16.13.1”，

• “反应本机”：“ 0.63.2”，

• “ react-native-gesture-handler”：“ ^ 1.7.0”，

• “ react-native-vector-icons”：“ ^ 7.0.0”，

• “反应导航”：“ ^ 4.4.0”

解决方法

更改所有这些

import Welcome from '/screens/Welcome';
import Register from 'screens/Register';
import Login from '/screens/Login';

到

import Welcome from './screens/Welcome';
import Register from './screens/Register';
import Login from './screens/Login';

您可以共享文件夹结构以更清楚地了解

,

仅在您的screens文件夹中添加package.json

{
    "name": "@screens"
}

然后导入您的脚本，如

import Welcome from "@screens/Welcome";