我正在尝试将第二个文件导入到App.js中以用于我的项目。我收到错误消息“开发服务器返回响应错误代码：500”。基本上说“无法从“App.js”解析“MainFile”。
为什么会发生这种情况？我相信这是正确的，但由于某种原因，这个bug说文件不存在。第一个代码是我的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: {

    },
});