javascript - 反应本机错误'无法解析模块......'

Question

'Unable to resolve module './app/screens/loginForm' from '/Users/salwabadreddine/Desktop/moappetit/app/screens/navigation.js'即使我已将 loginForm 保存在该目录中，即使我尝试将代码复制并粘贴loginForm.js到，我仍然会收到此 错误，但Navigation.js会显示正确的输出并且不会发生错误。但是，当我尝试将其导入时，loginForm它Navigation.js会给我这个错误。任何帮助都会很棒。

//Navigation.js file

import { createStackNavigator } from 'react-navigation-stack';
import { Button } from 'react-native-material-ui';
import LoginScreen from './app/screens/loginForm';
import React from 'react';
import {View, StyleSheet} from 'react-native';
import{ createAppContainer } from 'react-navigation';
import { TextField } from 'react-native-materialui-textfield';

class InitialScreen extends React.Component {
render() {
    return (
        <View style={styles.container}>
            <Button 
            style={{ container: styles.buttonStyle}} 
            primary={true} 
            text="Login" 
            raised={true} 
            onPress={() => this.props.navigation.navigate('Login')}/>
            <Button 
            style={{ container: styles.buttonStyle}} 
            primary={true} 
            text="Register" 
            raised={true} 
            onPress={() => this.props.navigation.navigate('Register')}/>
        </View>
    );
}
}

class RegisterScreen extends React.Component {
render() {
    return (
        <View style={styles.container}>
            <Button 
            style={{ container: styles.buttonStyle}} 
            primary={true} 
            text="Go back" 
            raised={true} 
            onPress={() => this.props.navigation.goBack()}/>
        </View>
    );
}
}

const AppNavigator = createStackNavigator({
Initial: InitialScreen,
Login: LoginScreen,
Register: RegisterScreen,
}, {
initialRouteName: 'Initial',
});

const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
  paddingTop: 50,
},
buttonStyle: {
  width: 100,
  height: 40,
  backgroundColor: 'rgba(12, 57, 14, 0.85)',
},
submitButtonStyle: {
    backgroundColor: 'rgba(12, 57, 14, 0.85)',
}
  });

const Container = createAppContainer(AppNavigator);

export default Container;

//loginForm.js file:

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Button} from 'react-native-material-ui';
import { TextField } from 'react-native-materialui-textfield';
export default class LoginScreen extends React.Component {

// Initializing state
constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
    };
}

// Handling change when user enters text for email
handleEmailChange = email => {
    this.setState({email})
}

// Handling change when user enters text for password
handlePasswordChange = password => {
    this.setState({password})
}

loginAPI = async (email, password) => {
    try {
        var requestOptions = {
            "method": "POST",
            "headers": {
                "Content-Type": "application/json"
            }
        };

        var body = {
            "provider": "email",
            "data": {
                "email": email,
                "password": password
            }
        };
        requestOptions.body = JSON.stringify(body)
        const response = await fetch("https://auth.moappetit.com/v1/login", requestOptions)
        const result = await response.json() // result.auth_token will return the auth token for current session
        console.log(result)
    } catch (e) { console.log(e) }
}

// Rendering to the UI the Input options and form button
render() {
    return (
    <View style={styles.container}>
        <TextField tintColor='rgba(12, 57, 14, 0.85)'
        required
        value= {this.state.email}
        onChangeText={this.handleEmailChange}
        label="Email"
        />
        <TextField tintColor='rgba(12, 57, 14, 0.85)'
        required
        secureTextEntry={true}
        value= {this.state.password}
        onChangeText={this.handlePasswordChange}
        label="Password"
        />
        <View>
            <Button style={{ container: styles.buttonStyle}} text="Login" raised={true} primary={true} onPress={ () => this.loginAPI(this.state.email, this.state.password)}/>
        </View>
    </View>
    )
}

}

const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: '#fff',
  paddingTop: 50,
},
buttonStyle: {
    backgroundColor: 'rgba(12, 57, 14, 0.85)',
},
  });

标签： javascriptreactjsreact-nativeexpo