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

Question

我怎么解决这个问题？

我只是想用路由器切换屏幕但是
我在 ios 模拟器上收到此错误：错误屏幕截图结构：结构

[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);

欢迎.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'


}
  
});

应用程序.js

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

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

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} 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,
backgroundColor:'yellow',
alignItems:'center',
justifyContent:'center'


}
  
});

路由器.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”

Answer 1

将所有这些从

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';

您可以共享您的文件夹结构以获得更清晰的信息

Answer 2

在您的屏幕文件夹中添加 package.json

{
    "name": "@screens"
}

然后导入你的屏幕，比如

import Welcome from "@screens/Welcome";