为什么导入在反应本机中不起作用

Question

我正在尝试将我的第二个文件导入我的项目.js App。我收到错误"开发服务器返回响应错误代码：500"。基本上说"无法从"应用程序.js解析"主文件"。

为什么会这样？我相信这是正确的，但由于某种原因，这个错误说该文件不存在。第一个代码是我的App.js文件，第二个是我尝试导入的代码。

https://gyazo.com/6911c477f9c9e8149370571ca49a0b9f

https://gyazo.com/73f0079bc6a2640877bcc30fa1e609ec

import React from 'react';
import MainFile from './components/MainFile';

export default class App extends React.Component{
  render() {
    return(
      <MainFile />
    );
  }
}

---

import React from 'react';
import {StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity} from 'react-native';
export default class MainFile extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text>Testing</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
    },
});

Answer 1

1. 删除node_modules文件夹
2. 编辑包 json：反应原生版本为"55.4"或"55.2"和babel-preset-react-native 到 "4.0.0" （如果您的版本不同）尝试使用最新的或降级它）。
3. 运行 npm install 或 yarn install 命令
4. 大功告成

来源 ： Github

Answer 2

1. 仔细检查给定路径中是否存在文件
2. 如果文件不是javascript（.js），那么提到扩展名
3. 引用文件时尝试使用双引号（例如"./src/.."）
4. 如果要导入的文件未.js，请确保在第一次导入时导入适当的反应库例如（ import {...， Image } from 'react-native' ）

Answer 3

在我的情况下，我将 ./MainFile 更改为 ./MainFile.js并开始工作。 这应该在不指定扩展名的情况下工作。但是出了点问题，他需要它

Answer 4

您需要

在要从中导入组件的文件夹中添加一个索引.js或 ts 页面，然后在该 index.js 页面中为组件编写导出语句。

添加导出就像下面一样，然后导入应该可以工作 -

从"./Home"导出 { 默认为主页 }

Answer 5

这个答案不适用于我的项目，因为我使用比这个版本更新的版本。

我在组件中使用这种类型的导出：

export default componentName

在这种情况下，我必须在没有大括号的情况下导入它

import componentName from './file' //ok
import { componentName } from './file' //wrong!

源