React native :Unable to resolve module 事实上，这些文件都不存在：答案

【问题标题】：React native :Unable to resolve module Indeed, none of these files exist:React native :Unable to resolve module 事实上，这些文件都不存在：
【发布时间】：2020-01-24 13:56:23
【问题描述】：

我正在关注 this medium article 在我的 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 时，我遇到了错误

    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:

谁能帮我解决这个问题

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

【问题讨论】：

试试这个导入 import FloatingTitleTextInputField from '../customComponents/floating_title_text_input_field';
@bk7 感谢您的快速回复让我检查一下

标签： android reactjs react-native components custom-component

【解决方案1】：

您从screens 目录中的HomeScreen 组件引用它。因为您使用的是本地 ./ 路径，所以它试图在 screens/customComponents 中找到它。使用../customComponents/floating_title_text_input_field 应该可以解决它。

【讨论】：

感谢我尝试使用import FloatingTitleTextInputField from '../customComponents/FloatingTitleTextInputField';，但仍然遇到同样的错误
对不起，我把文件写错了。我已经在上面更正了
@Goku FWIW，而不是使用相对路径，我通常从项目根目录中引用项目，如myprojectname/customComponents/floating_title_text_input_field。祝你好运

【解决方案2】：

即使您的错误是在 require 语句期间使用了错误的路径，我认为分享我如何解决此问题可能会很有用，其中文件导入路径不是错误的原因。在我添加了一些图像资产并在我的组件中需要它们后，我遇到了这个问题。但我忘了再次构建应用程序。经过多次尝试，这是对我有用的解决方案。

停止您的开发服务器。
使用yarn android/ios在您的安卓设备或模拟器上安装应用程序。
使用yarn start启动开发服务器。

【讨论】：

【解决方案3】：

FloatingTitleTextInputField 组件似乎是一个命名导出。所以像import { FloatingTitleTextInputField } from 'the source'一样导入它。

或者简单地将 FloatingTitleTextInputField 导出为 floating_title_text_input_field.js 文件中的export default class FloatingTitleTextInputField。

【讨论】：

【解决方案4】：

您可以清理捆绑器上的缓存：

npm start --clean-cache

【讨论】：