React Native报错：期望字符串/类/函数却得undefined及Expo引入SignIn问题

Hey there! Let’s work through this error you’re hitting when importing your SignIn component into App.js. That specific error almost always ties back to how components are imported/exported or a broken reference in your code—here’s how to troubleshoot it step by step:

Common Causes & Solutions #

1. Double-check your import/export syntax #

This is the #1 reason for this error. Make sure your SignIn component’s export matches how you’re importing it in App.js:

• If SignIn uses default export:
  In your SignIn file (e.g., SignIn.js):

  export default function SignIn() {
    // component code
  }
  

  Then in App.js, import it without curly braces:

  import SignIn from './path/to/SignIn';
  

• If SignIn uses named export:
  In your SignIn file:

  export function SignIn() {
    // component code
  }
  

  Then in App.js, use curly braces for the named import:

  import { SignIn } from './path/to/SignIn';
  

Mixing these two will result in importing undefined, which triggers that error.

2. Verify the file path is correct #

Typos or incorrect folder hierarchy in your import path will also lead to undefined imports:

• Check for typos (e.g., ./components/SignIn vs. ./component/SignIn—missing an "s")
• Ensure case matches exactly (some operating systems like macOS are case-insensitive, but others like Linux aren’t; ./Components/SignIn is different from ./components/SignIn)
• Use relative paths correctly: if SignIn is in a src/containers folder, your import should be import SignIn from './src/containers/SignIn' (adjust based on your project structure)

3. Simplify the SignIn component to isolate issues #

If the import/export looks right, the problem might be inside the SignIn component itself. Try stripping it down to a minimal working version:

// SignIn.js
import React from 'react';
import { View, Text } from 'react-native';

export default function SignIn() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Sign In Screen</Text>
    </View>
  );
}

Import this simplified version into App.js. If it works, gradually add back your original code to find which part is causing the undefined reference (e.g., a missing import for a third-party component, a broken custom hook, etc.).

4. Clear Expo’s cache and restart your project #

Expo sometimes caches old module references, leading to unexpected undefined errors. Try these steps:

• Close your Expo development server
• Run this command in your project root to clear cache and restart:

  expo r -c
  

• Restart the Expo Go app on your simulator or physical device to ensure it picks up the fresh code

5. Confirm all dependencies are installed #

If your SignIn component uses third-party libraries (like navigation tools, UI kits, or state management), make sure those dependencies are properly installed:

• Run npm install or yarn install in your project root to ensure all listed dependencies are present
• Check that you’re using compatible versions (e.g., if you’re using React Navigation, make sure your Expo version supports the navigation package version you’re using)

Final Tips #

Start with the import/export and file path checks—those are the quickest fixes. If those don’t resolve the issue, simplifying the component and clearing the cache will help you narrow down the problem. You’ll have that SignIn component up and running in no time!

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