reactjs React native:无法解析模块确实,这些文件都不存在:

lyr7nygr  于 2023-03-08  发布在  React
关注(0)|答案(5)|浏览(151)

我遵循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:

有人能帮我解决这个问题吗
如果需要更多的信息,请让我知道。提前感谢。您的努力将不胜感激。

6kkfgxo0

6kkfgxo01#

您可以清理打包程序上该高速缓存:

npm start --clean-cache
svdrlsy4

svdrlsy42#

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

a5g8bdjr

a5g8bdjr3#

尽管您的错误是在require语句中使用了错误的路径,但我认为分享一下我是如何解决这个问题的可能会很有用,因为文件导入路径不是错误的原因。我在添加了一些图像资源并在组件中需要它们之后遇到了这个问题。但我忘记再次构建应用程序。经过几次尝试,这是适合我的解决方案。
1.停止开发服务器。
1.使用yarn android/ios在您的android设备或模拟器上安装应用程序。
1.使用yarn start启动开发服务器。

wb1gzix0

wb1gzix04#

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

或者只是默认导出浮动标题文本输入字段,如 floating_title_text_input_field.js 文件中的export default class FloatingTitleTextInputField

jucafojl

jucafojl5#

我可能有点晚了,但如果有人仍然在寻找这个问题,还没有找到解决方案,并正在使用Expo,只需确保您得到错误的组件是否有

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

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

在return语句中,由于某种原因,从return块中删除此导入将破坏您的代码!

相关问题