React Native 组件异常 - 元素类型无效：预期的字符串......未定义

Question

我最近在我的项目中添加了一个组件，但由于某种原因出现了这个错误。我知道它从组件中正确导出并由 App.js 正确导入。（默认导出并在没有 {} 的情况下导入）。

同样奇怪的是，当我将 App 的导出从函数声明中的导出更改为使用“export default App;”行从下方导出时错误改变了。通常它会告诉我“检查 'ListingEditScreen' 的渲染方法。”在错误的底部。但是当我用 App 函数声明下面的行导出时，它说，“检查 'ExpoRoot' 的渲染方法。”

我在这个项目中使用了 Expo，但是我无法在 Expo 文件夹中找到 ExpoRoot 组件。

这是我的组件：

import React from "react";
import { StyleSheet } from "react-native";
import * as Yup from "yup";

import {
  AppForm as Form,
  AppFormField as FormField,
  AppFormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";

const validationSchema = Yup.object().shape({
  title: Yup.string().required().min(1).label("Title"),
  price: Yup.number().required().min(1).max(10000).label("Price"),
  description: Yup.string().label("Description"),
  category: Yup.object().required().nullable().label("Category"),
});

const categories = [
  { label: "Furniture", value: 1 },
  { label: "Clothing", value: 2 },
  { label: "Camera", value: 3 },
];

function ListingEditScreen() {
  return (
    <Screen style={styles.container}>
      <Form
        initialValues={{
          title: "",
          price: "",
          description: "",
          category: null,
        }}
        onSubmit={(values) => console.log(values)}
        validationSchema={validationSchema}
      >
        <FormField maxLength={255} name="title" placeholder="Title" />
        <FormField
          keyboardType="numeric"
          maxLength={8}
          name="price"
          placeholder="Price"
        />
        <Picker items={categories} name="category" placeholder="Category" />
        <FormField
          maxLength={255}
          multiline
          name="description"
          numberOfLines={3}
          placeholder="Description"
        />
        <SubmitButton title="Post" />
      </Form>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});
export default ListingEditScreen;

这是我目前的 App.js:

import React from "react";
import ListingEditScreen from "./app/screens/ListingEditScreen";

export default function App() {
  return <ListingEditScreen />;
}

这是 iOS 模拟器上的错误截图：

非常感谢任何帮助！谢谢

Answer 1

此错误意味着您正在渲染一个未定义的组件。这将引发相同的错误：

const Example;

function App() {
  return <Example />
}

我的猜测是这些组件之一未正确命名或未从表单文件中正确导出：

import {
  AppForm as Form,
  AppFormField as FormField,
  AppFormPicker as Picker,
  SubmitButton,
} from "../components/forms";

例如，如果 SubmitButton 实际上是 Button，那么您会看到此错误。

React Native 组件异常 - 元素类型无效：预期的字符串......未定义

React Native Component Exception - Element Type is invalid: expected string...got undefined

javascript

ios-simulator

reactjs

react-native

expo