React Native组件导入报错及两种Component导入方式疑问

Hey there! Let's unpack this issue for you—since you're new to React Native, it's totally normal to hit these import-related snags, so let's break it down step by step.

First: The Difference Between Those Two Import Styles #

Let's start with what each import is actually doing, because that's key to understanding why one works and the other is causing trouble:

• import Component from 'react': This is a default import. React's default export is the entire React object itself, not the Component class. So when you write this line, you're actually assigning the full React library object to a variable named Component. That's not what you want, even if it seems to work right now—more on that later.
• import React, {Component} from 'react': This is a combination of a default import (for the React object) and a named import (for the Component class). This is the official, recommended way to import what you need. The React object is required behind the scenes when you write JSX (since JSX compiles to React.createElement() calls), and Component is the base class you extend to create class-based components.

Why Does import React, {Component} from 'react' Trigger That Error? #

The "element type is invalid expected a string" error almost always boils down to a mismatch in how you're defining, exporting, or importing your components. Here are the most likely culprits when this happens with the correct import syntax:

• Typos in component inheritance: Double-check that you spelled Component correctly when extending it (e.g., class MyScreen extends Component not Componet or component).
• Export/import mismatch: If you export your component as a default export (export default MyScreen), make sure you import it with import MyScreen from './MyScreen' (not the curly brace syntax for named imports). If you use a named export (export class MyScreen), then you need import {MyScreen} from './MyScreen'.
• Incorrect component rendering: Make sure you're rendering components like <MyScreen /> and not calling them as functions like {MyScreen()}—the latter will return JSX but not as a valid component type.
• Outdated React version: Super old React versions (pre-v15 or so) might not support named imports for Component, but this is pretty rare these days unless you're working on a legacy project.

Is It Okay to Use import Component from 'react'? #

Short answer: No, this is not a safe or correct practice. Even if it seems to work right now, you're actually using the full React object as your base component class, which is not what it's designed for. This could lead to weird bugs down the line, like broken lifecycle methods, compatibility issues with React updates, or unexpected behavior when using React features.

Fixing the Error #

To get the correct import syntax working without errors:

1. Stick with import React, {Component} from 'react' for class components.
2. Verify all your component definitions, exports, and imports are aligned (default vs named).
3. Double-check that you're rendering components correctly with the angle bracket syntax.

If you're still stuck, try creating a minimal test component (like a simple HelloWorld class component) using the correct import syntax—this will help you narrow down if the issue is with a specific component or a broader setup problem.

内容的提问来源于stack exchange，提问作者user12114366