javascript - 无法从 C:\Users\vkgan\ForRealNow\navigators\RootStack.js 解析模块 ./screens/Login：

Question

react-navigation自从我实施到我的expo react-native项目中以来，我一直收到此错误。这是完整的错误消息：

无法从 C:\Users\vkgan\ForRealNow\navigators\RootStack.js 解析模块 ./screens/Login：

这些文件都不存在：

• 导航器\screens\Login(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios .jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
• 导航器\屏幕\登录\索引（.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js| .ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)

RootStack.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;

包.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
}

登录.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;

应用程序.js

import React from 'react';



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

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

这是我的项目的组织

请让我知道我是否应该提供任何其他信息

标签： javascriptreact-native

Answer 1

Login存在于文件screens夹和文件夹中。RootStacknavigators

所以在RootStack.js导入screens文件夹的文件中是这样的：

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