无法解析模块。/屏幕/登录从C：\用户\vkgan\ForRealNow\导航器\RootStack.js：

Question

自从我在我的< code > Expo < code > react-native 项目中实现< code>react-navigation以来，我就一直收到这个错误。以下是完整的错误消息:

无法解析模块。/屏幕/登录从C：\用户\vkgan\ForRealNow\导航器\RootStack.js：

这些文件都不存在：

• navigators \screens\Login（.native|.ios.ts|.native.ts|.ts|.ios.tesx|.native.tesx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.nive.jsx|.jsx|.ios.json|.native.json|.json）
• navigators\screens\Login\index（.native|.ios.ts|.native.ts|.ts|.ios.tesx|.native.tesx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.notel.jsx|.jsx|.ios.json|.noter.json|.json）

根堆栈.js：

// import react navigation
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

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



// Colors
import {Colors} from './components/styles';
const{brand, darkLight, primary, tertiary } = Colors;

import React from 'react';

const Stack = createStackNavigator();

const ArrowStack = () => {
    return(
        
        <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{
                        headerStyled: {
                            backgroundColor: 'transparent'
                        },
                        headerTintColor: tertiary,
                        headerTransparent: true,
                        headerTitle: '',
                        headerLeftContainerStyle:{
                            paddingLeft:20
                        }


                    }}
                    initialRouteName="Login"
                >
                    <Stack.screen name="Login" component={Login} />
                    <Stack.screen name="Signup" component={Signup} />
                    <Stack.screen options={{ headerTintColor: primary }} name="Welcome" component={Welcome} />
                </Stack.Navigator>
        </NavigationContainer>
    );
}

export default ArrowStack;

package.json：

{
  "name": "forrealnow",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "3.5.2",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "expo": "~43.0.0",
    "expo-constants": "~12.1.3",
    "expo-status-bar": "~1.1.0",
    "formik": "^2.2.9",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.2",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.8.0",
    "react-native-web": "0.17.1",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Login.js：

import React, {useState} from 'react';
import { StatusBar } from 'expo-status-bar';

//formik
import {Formik} from 'formik';

//icons
import {Octicons, Ionicons, Fontisto } from '@expo/vector-icons';


import{
    StyledContainer, 
    InnerContainer,
    PageLogo,
    PageTitle,
    SubTitle,
    StyledFormArea,
    LeftIcon,
    StyledInputLabel,
    StyledTextInput,
    RightIcon,
    Colors,
    StyledButton,
    ButtonText,
    MsgBox,
    Line,
    ExtraView,
    ExtraText,
    TextLink,
    TextLinkContent
} from './../components/styles'
import {Keyboard, View} from 'react-native';

// Colors
const{brand, darkLight, primary} = Colors;

// keyboard avoiding view
import KeyboardAvoidingwrapper from '../components/KeyboardAvoidingwrapper';

const Login = ({navigation}) => {
    const {hidePassword, setHidePassword} = useState(true);

    return(
        <KeyboardAvoidingwrapper>
            
            <StyledContainer>
            <StatusBar style="dark"/>
            <InnerContainer>
                <PageLogo resizeMode= 'cover'source={require('./../assets/icon.png')}/>
                <PageTitle>Flower Crib</PageTitle>
                <SubTitle>Account Login</SubTitle>

                <Formik
                    initialValues={{email: '', password: ''}}
                    onSubmit={(values) => {
                        console.log(values)
                        navigation.navigate("Welcome");
                    }}
                >{({handleChange, handleBlur, handleSubmit, values}) => (<StyledFormArea>
                    <MyTextInput 
                        label="Email Address"
                        icon="mail"
                        placeholder="[e-mail]"
                        placeholderTextColor={darkLight}
                        onChangeText={handleChange('email')}
                        onBlur={handleBlur('email')}
                        value={values.email}
                        keyboardType="email-address"
                    />

                    <MyTextInput 
                        label="Password"
                        icon="lock"
                        placeholder="*************"
                        placeholderTextColor={darkLight}
                        onChangeText={handleChange('password')}
                        onBlur={handleBlur('password')}
                        value={values.password}
                        secureTextEntry={hidePassword}
                        isPassword={true}
                        hidePassword={hidePassword}
                        setHidePassword={setHidePassword}
                    />
                    <MsgBox>...</MsgBox>
                    <StyledButton onPress={handleSubmit}>
                        <ButtonText>
                            Login
                        </ButtonText>
                    </StyledButton>
                    <Line />
                    <StyledButton google={true} onPress={handleSubmit}>
                        <Fontisto name="google" color={primary} size={25} />
                        <ButtonText google={true}> 
                            Sign in with Google
                        </ButtonText>
                    </StyledButton>
                    <ExtraView>
                        <ExtraText>
                            Don't have an account already?
                        </ExtraText>
                        <TextLink onPress={() => navigation.navigate("Signup")}>
                            <TextLinkContent>Signup</TextLinkContent>
                        </TextLink>
                    </ExtraView>
                </StyledFormArea>)}
                    
                

                
                </Formik>
            </InnerContainer>
        </StyledContainer>
        </KeyboardAvoidingwrapper>
    );

}

const MyTextInput = ({label, icon, isPassword, hidePassword, setHidePassword, ...props}) =>{
    return(
        <View>
            <LeftIcon>
                <Octicons name={icon} size={30} color={brand} />
            </LeftIcon>
            <StyledInputLabel>{label}</StyledInputLabel>
            <StyledTextInput {...props}/>
            {isPassword && (
                <RightIcon onPress={() => setHidePassword(!hidePassword)}>
                    <Ionicons name={hidePassword ? 'md-eye-off' : 'md-eye'} size={30} color={darkLight}/>
                </RightIcon>
            )}
        </View>
    )
}

export default Login;

App.js

import React from 'react';



//import Root Stack
import RootStack from './navigators/RootStack';

export default function App() {
  return (
    <RootStack/>
  );
}

这是我项目的组织结构

请告诉我是否还有其他信息需要我提供

Answer 1

登录存在于屏幕文件夹中，根堆栈存在于导航器文件夹中。

所以在< code>RootStack.js中导入< code>screens文件夹的文件是这样的:

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