在与Expo进行本机反应时发生不变违反错误。元素类型无效。预期的字符串，但未定义

Question

我正在使用搜索用户功能构建社交媒体应用，当我尝试与Firebase用户创建平面列表时，出现以下错误：

[20:19:18] Invariant Violation: Invariant Violation: 
Element type is invalid: expected a string (for built-in 
components) or a class/function (for composite components) 
but got: undefined. You likely forgot to export your 
component from the file it's defined in, or you might have 
mixed up default and named imports.

Check the render method of `PeopleScreen`.
- node_modules\react- 
native\Libraries\Renderer\oss\ReactNativeRenderer- 
dev.js:5716:10 in createFiberFromTypeAndProps
- node_modules\react- 
native\Libraries\Renderer\oss\ReactNativeRenderer- 
dev.js:5744:4 in createFiberFromElement
- ... 19 more stack frames from framework internals

这是整个屏幕的代码，其中包含所有功能：

import React from "react";
import { View, ActivityIndicator, SafeAreaView, FlatList } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
import _ from "lodash";

export default class PeopleScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    loading: true,
    data: [],
    error: null
  };

  componentDidMount() {
    this.makeRemoteRequest();
  }

  contains = ({ email }, query) => {
    if (email.includes(query)) {
      return true;
    }

    return false;
  };

  getUsers = (limit = 20, query = "") => {
    return new Promise((res, rej) => {
      if (query.length === 0) {
        res(_.take(users, limit));
      } else {
        const formattedQuery = query.toLowerCase();
        const results = _.filter(users, user => {
          return contains(user, formattedQuery);
        });
        res(_.take(results, limit));
      }
    });
  };

  makeRemoteRequest = () => {
    return ref.onSnapshot(querySnapshot => {
      const users = [];
      querySnapshot.forEach(doc => {
        const {title, complete } = doc.data();
        users.push({
          id: doc.id,
          email,
        });
      });

      if (loading) {
        this.setState({ loading: false });
      };
    });

    this.setState({ loading: true });

    getUsers()
      .then(users => {
        this.setState({
          loading: false,
          data: users
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

  renderSeparator = () => {
    return (<View style={{ height: 1, width: "86%", backgroundColor: "#CED0CE", marginLeft: "14%" }} />);
  };

  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />;
  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View style={{ paddingVertical: 20, borderTopWidth: 1, borderColor: "#CED0CE" }}>
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  render() {
    return (
      <SafeAreaView>
        <List style={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
          <FlatList
            data={this.state.data}
            renderItem={({ item }) => (
              <ListItem roundAvatar title={`${item.email}`} subtitle={item.email} />
            )}
            keyExtractor={item => item.email}
            ItemSeparatorComponent={this.renderSeparator}
            ListHeaderComponent={this.renderHeader}
            ListFooterComponent={this.renderFooter}
          />
        </List>
      </SafeAreaView>
    );
  }
}

对于这个问题的任何帮助，我们将不胜感激，因为我已经调试了很多天，但现在仍无法解决。预先谢谢你！