Ошибка React-Native: не удается разрешить модуль '/ screen / Welcome' из 'index.js ':

#javascript #react-native #react-native-android #react-native-ios #react-native-navigation

#javascript #react-native #react-native-ios #react-native-навигация

Вопрос:

Как я могу решить эту проблему?

Я просто хотел использовать маршрутизатор для переключения экранов, но
я получил эту ошибку в эмуляторе 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);

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

Версии

«react»: «16.13.1»,
«react-native»: «0.63.2»,
«react-native-обработчик жестов»: «^ 1.7.0»,
«react-native-vector-icons»: «^ 7.0.0»,
«react-navigation»: «^ 4.4.0»

Ответ №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';

Вы можете поделиться своей структурой папок для большей ясности

Ответ №2:

добавьте package.json в папку screens с только

 {
    "name": "@screens"
}

а затем импортируйте ваши скрины, такие как

 import Welcome from "@screens/Welcome";