收到错误React.createElement：类型无效

Question

获取错误警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

App.js文件->

import React, { Component } from 'react';

import AppRouter from './src/navigation/Nav';

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

SearchScreen.js文件->

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SearchBar from '../components/SearchBar';

const SearchScreen = () => {
  const [term, setTerm] = useState('');

  return (
    <View>
      <SearchBar
        term={term}
        onTermChange={newTerm => setTerm(newTerm)}
        onTermSubmit={() => console.log('term was submitted')}
      />
      <Text>Search Screen</Text>
      <Text>{term}</Text>
    </View>
  );
};

const styles = StyleSheet.create({});

export default SearchScreen;

Nav.js文件->

 import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';
    
    import SearchScreen from '../screens/SearchScreen';
    
    const navigator = createStackNavigator(
      {
        Search: SearchScreen,
      },
      {
        initialRouteName: 'Search',
        defaultNavigationOptions: {
          title: 'Business Search',
        },
      }
    );
    
    export default createAppContainer(navigator);

这是SearchBar.js文件->

import React from 'react';
    import { View, TextInput, StyleSheet } from 'react-native';
    import {Feather}  from 'react-native-vector-icons';
    
    const SearchBar = ({ term, onTermChange, onTermSubmit }) => {
      return (
        <View style={styles.backgroundStyle}>
          <Feather name="search" style={styles.iconStyle} />
          <TextInput
            autoCapitalize="none"
            autoCorrect={false}
            style={styles.inputStyle}
            placeholder="Search"
            value={term}
            onChangeText={onTermChange}
            onEndEditing={onTermSubmit}
          />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      backgroundStyle: {
        marginTop: 10,
        backgroundColor: '#F0EEEE',
        height: 50,
        borderRadius: 5,
        marginHorizontal: 15,
        flexDirection: 'row'
      },
      inputStyle: {
        flex: 1,
        fontSize: 18
      },
      iconStyle: {
        fontSize: 35,
        alignSelf: 'center',
        marginHorizontal: 15
      }
    });
    
    export default SearchBar;