React Native：无法解析模块，确实不存在这些文件：

Question

我正在遵循这篇中等文章，在我的React Native项目中使用FloatingTitleTextInputField

以下是我的项目结构

这是我的HomeScreen.js代码

import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet} from 'react-native';
import FloatingTitleTextInputField from './customComponents/floating_title_text_input_field';



export default class HomeScreen extends Component {
  render() {
    return (
      // <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      //   <Text>My First React App</Text>
      //   <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
      // </View>

      <View style={styles.container}>
        <View style={styles.container}>
          <Text style={styles.headerText}>Its Amazing</Text>
          <FloatingTitleTextInputField
            attrName="firstName"
            title="First Name"
            value={this.state.firstName}
            updateMasterState={this._updateMasterState}
          />
          <FloatingTitleTextInputField
            attrName="lastName"
            title="Last Name"
            value={this.state.lastName}
            updateMasterState={this._updateMasterState}
          />
        </View>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 65,
    backgroundColor: 'white',
  },
  labelInput: {
    color: '#673AB7',
  },
  formInput: {
    borderBottomWidth: 1.5,
    marginLeft: 20,
    borderColor: '#333',
  },
  input: {
    borderWidth: 0,
  },
});

当我尝试在HomeScreen.js中使用FloatingTitleTextInputField时，我遇到以下错误

Translated: When I try to use FloatingTitleTextInputField inside HomeScreen.js, I'm getting the below error.

    error Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/

HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:


  * `/React Native/AwesomeProject/screens/floating_title_text_input_field(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`


  * `/React Native/AwesomeProject/screens/floating_title_text_input_field/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`. Run CLI with --verbose flag for more details.


Error: Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:

有人能帮我解决这个问题吗？

如果需要更多信息，请告诉我。提前感谢您的努力，将不胜感激。

- Goku

---

尝试使用以下导入语句：import FloatingTitleTextInputField from '../customComponents/floating_title_text_input_field'; - Basha K

@bk7 谢谢您的快速回复，让我来检查一下。 - Goku

Answer 1

您可以清除打包工具的缓存：

npm start --clean-cache

- jas-chu

---

我的导入文件路径名是正确的。并且这个解决方案对我起作用了。 - Anshuman Singh

我不知道为什么，但这对我也起作用，你需要停止地铁构建器，然后运行此命令。 - Ankit Kumar

你节省了我的时间。我的路径和组件都是正确的，但不知何故一直出现模块未找到的错误。 - armin

Answer 2

你是从位于`screens`目录下的`HomeScreen`组件里引用它。因为你使用了本地路径`./`，它试图在`screens/customComponents`中寻找它。使用`../customComponents/floating_title_text_input_field`应该能修复它。

- Mike M

---

谢谢，我已经尝试使用import FloatingTitleTextInputField from '../customComponents/FloatingTitleTextInputField';，但仍然出现相同的错误。 - Goku

抱歉，我之前写错了文件的驼峰命名法。我已经进行了更正。 - Mike M

@Goku 顺便说一句，我通常不使用相对路径，而是从项目根目录引用项目项，例如 myprojectname/customComponents/floating_title_text_input_field。祝你好运！ - Mike M

我曾在Expo中遇到同样的问题。 我将文件名从“someCamel”重命名为“SomeCamel”，并且VS代码可以很好地导入'../someCamel'，连Expo React Native web也可以正常使用，但是iOS却不行。谢谢，因为其它文件一直运行良好，所以我一直认为不是文件名的问题，让我纠结了好久。 - Yonz

Answer 3

虽然你在require语句中使用了错误的路径，但我认为分享一下我如何解决这个问题可能会有用，因为文件导入路径不是错误的原因。在我的组件中添加了一些图像资产并要求它们后，我遇到了这个问题。但是我忘记重新构建应用程序。经过几次尝试，这是对我起作用的解决方案。

1. 停止你的开发服务器。
2. 使用yarn android / ios将应用程序安装到你的Android设备或模拟器上。
3. 使用yarn start启动开发服务器。

- Devorein

Answer 4

对我来说，这是由于自动导入时有一个大写字母错误造成的。

import {HomeScreen} from './screens/HomeScreen';

import {HomeScreen} from './screens/homeScreen';

- Ward

Answer 5

FloatingTitleTextInputField 组件似乎是一个命名导出。因此，可以像这样导入它：import { FloatingTitleTextInputField } from 'the source'。

或者在 floating_title_text_input_field.js 文件中将 FloatingTitleTextInputField 简单地默认导出，如下所示：export default class FloatingTitleTextInputField。

- Vivek Mahajan

Answer 6

在我的情况下，我正在使用 ts 文件，但是 VSCode 将该文件导入为 *.js 而不是 *.ts。我忽略了这一点。将导入从 *.js 更改为 *.ts 对我来说解决了问题。

- Elliot

Answer 7

解决方案：在我的情况下，我忘记在组件名称的末尾添加.js。

添加后问题解决了。

- Breno Medeiros de Oliveira

Answer 8

我可能有点晚到派对，但如果有人仍在寻找此问题并且尚未找到解决方案，并且正在使用Expo，请确保您从中获取错误的组件具有

import { StatusBar } from 'expo-status-bar';

return (
<View>
...Some Code
<StatusBar style="auto" />
<View>
)

在返回语句中，由于某种原因，从返回块中删除此导入将会破坏您的代码！

- Vedant Sonkar

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community