無法解析模塊。/SignIn In React Native 應用程序

Question

嗨，我在 React Native 中收到一個錯誤，說它無法解析模塊。 這是說某個文件夾不存在，但路徑是准確的。 它告訴我 Directory /Users/Administrator/test/App/SignIn.js不存在。我的目錄看起來像這樣

登錄.js

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native'
import axios from 'axios'
import AsyncStorage from '@react-native-community/async-storage'

class SignIn extends React.Component {
  state = {
    email: '',
    password: '',
    loading: false,
  }
  onChangeHandle(state, value) {
    this.setState({
      [state]: value,
    })
  }
  dologin() {
    const { email, password } = this.state
    if (email && password) {
      const req = {
        email: email,
        password: password,
      }
      this.setState({
        loading: true,
      })
      axios.post('https://reqres.in/api/login', req).then(
        (res) => {
          this.setState({
            loading: false,
          })
          AsyncStorage.setItem('token', res.data.token).then((res) => {
            this.props.navigation.navigate('App')
            alert('Login Successful')
          })
        },
        (err) => {
          this.setState({
            loading: false,
          })
          alert('User Name Password is wrong')
        }
      )
    } else {
      alert('Enter Email and password')
    }
  }
  render() {
    const { email, password, loading } = this.state
    return (
      <View style={styles.signin}>
        <Text style={styles.string}>Hello There!</Text>
        <Text style={styles.string}>Welcome Back</Text>
        <Text style={styles.Text}>EMAIL</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your Email"
          underlineColorAndroid={'transparent'}
          keyboardType="email-address"
          value={email}
          onChangeText={(value) => this.setState({ email: value })}
          disabled={loading}
        />
        <Text style={styles.Text}>PASSWORD</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your Password"
          secureTextEntry={true}
          underlineColorAndroid={'transparent'}
          value={password}
          onChangeText={(value) => this.setState({ password: value })}
        />
        <TouchableOpacity
          style={styles.button}
          activeOpacity={0.8}
          style={{
            ...styles.signinBtn,
            backgroundColor: loading ? '#ddd' : 'blue',
          }}
          onPress={() => this.dologin()}
          disabled={loading}
        >
          <Text style={styles.btntext}>
            {loading ? 'Loading...' : 'SignIn'}
            Sign In
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
}
export default SignIn

const styles = StyleSheet.create({
  signin: {
    alignSelf: 'stretch',
  },
  textinput: {
    alignSelf: 'stretch',
    height: 40,
    marginBottom: 30,
    color: '#1D1105',
    borderBottomColor: '#f8f8f8',
    borderBottomWidth: 1,
  },
  button: {
    alignSelf: 'stretch',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#6069f2',
    marginTop: 30,
  },
  btntext: {
    color: '#fff',
    fontWeight: 'bold',
  },
  string: {
    alignContent: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },
})

路由.js

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import SignIn from './App/SignIn'
import Dashboard from './App/DashBoard'
import AuthLoadingScreen from './App/Authentication'

const BeforeSignin = createStackNavigator(
  {
    SignIn: {
      screen: SignIn,
    },
  },
  {
    headermode: 'none',
    initialRouteName: 'Login',
  }
)
const AfterSignin = createStackNavigator(
  {
    Dashboard: {
      screen: Dashboard,
    },
  },
  {
    headermode: 'none',
    initialRouteName: 'Dashboard',
  }
)
const AppNavigator = createStackNavigator(
  {
    Auth: BeforeSignin,
    App: AfterSignin,
    AuthLoadingScreen: AuthLoadingScreen,
  },
  {
    headermode: 'none',
    initialRouteName: 'Auth',
  }
)
export default createAppContainer(AppNavigator)

我檢查了幾次，似乎無法理解錯誤的原因

Answer 1

點的使用. 指同級目錄。

更改自：

import Signin from "./App/SignIn"

至：

import Signin from "./SignIn"

但如果你堅持使用App/Signin格式，可以參考以下文章： Absolute imports with Create React App 。

Answer 2

@Rishail Siddiqui，嘗試更改導入方法，例如

import SignIn from './SignIn';

import Dashboard from './DashBoard';

import AuthLoadingScreen from './Authentication';