错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）

Question

请有人帮助我，我正在尝试修复 index.js 文件中发生的此错误：

import { Image, StyleSheet, Text, View, ScrollView } from "react-native";
import { Button, Gap, Number, TransactionCard } from "../../components";
import firebase from "../../config/Firebase";

const Home = ({ navigation, route }) => {
  const [profile, setProfile] = useState({});
  const [balance, setBalance] = useState({
    cashOnHand: 0,
    cashOnBank: 0,
    totalBalance: 0,
  });

  const { uid } = route.params;

  const getUserProfile = () => {
    firebase
      .database()
      .ref(`users/${uid}/`)
      .once("value", (res) => {
        const photo = `data:image/jpeg;base64, ${res.val().photo}`;
        setProfile({ ...res.val(), photo: photo });
      });
  };

  const getUserBalance = () => {
    firebase
      .database()
      .ref(`balance/${uid}`)
      .on("value", (res) => {
        if (res.val()) {
          setBalance(res.val());
        }
      });
  };

  useEffect(() => {
    getUserProfile();
    getUserBalance();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.profileWrapper}>
        <View>
          <Text style={styles.title}>Money Tracker</Text>
          <Text style={styles.subTitle}>Track your money</Text>
        </View>
        <Image source={{ uri: profile.photo }} style={styles.image} />
      </View>
      <Gap height={24} />
      <View style={styles.balanceWrapper}>
        <Text style={styles.cardTitle}>Your Balance</Text>
        <Number number={balance.totalBalance} style={styles.balance} />
        <Text style={styles.cashOnHand}>
          Cash On Hand{" "}
          <Number number={balance.cashOnHand} style={styles.amount} />
        </Text>
        <Text style={styles.cashOnBank}>
          Cash On Bank{" "}
          <Number number={balance.cashOnBank} style={styles.amount} />
        </Text>
      </View>
      <Gap height={24} />
      <View style={styles.addTransactionWrapper}>
        <Text style={styles.cardTitle}>Add Transaction</Text>
        <Button
          title="Cash On Hand"
          onPress={() =>
            navigation.navigate("AddTransaction", {
              title: "Cash On Hand",
              uid: uid,
            })
          }
        />
        <Gap height={16} />
        <Button
          title="Cash On Bank"
          onPress={() =>
            navigation.navigate("AddTransaction", {
              title: "Cash On Bank",
              uid: uid,
            })
          }
        />
      </View>
      <Gap height={24} />
    </View>
  );
};

export default Home;

这可能是由程序中的一些 JS 模块导出/导入问题引起的，通常是以下两个原因之一：

• 忘记导出，或者导出错误
• 你导入了一些不存在的东西，或者你导入了一些东西 错误

但我不知道这个错误。提前致谢。