React-Native error: Unable to Resolve Module '/screen/Welcome' from 'index.js':

Question

我该如何解决这个问题？

我只是想用路由器切换屏幕，但是
我在 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,
  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'


}
  
});

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",

• "react-native": "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";