如何从react-native修复此错误？

Question

我正在尝试使用 React Native 制作一些扫描仪应用程序，并且正在编写该项目的基本框架，但它不断抛出错误。

这是我的代码：

应用程序.js

import App from './src/App';

export default App;

src/App.js

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { Stacks } from './Stack';

const App = () => {
  return (
    <NavigationContainer>
      <StatusBar style="auto" />
      <Stacks />
    </NavigationContainer>
  );
};

export default App;

src/Stack.js

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import CameraScreen from './screens/CameraScreen';
import InfoScreen from './screens/InfoScreen';

const Stack = createNativeStackNavigator();

const Stacks = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Camera" component={CameraScreen} />
      <Stack.Screen name="Info" component={InfoScreen} />
    </Stack.Navigator>
  );
};

export default Stacks;

src/screens/CameraScreen.js

import { StyleSheet, Text, View } from 'react-native';

const CameraScreen = () => {
  return (
    <View style={styles.container}>
      <Text>CAMERA SCREEN</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default CameraScreen;

src/screens/InfoScreen.js

import { StyleSheet, Text, View } from 'react-native';

const InfoScreen = () => {
  return (
    <View style={styles.container}>
      <Text>INFO SCREEN</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default InfoScreen;

这些代码给我一个错误如下：

错误

Error: 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 `App`.

This error is located at:
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:433)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:7)
    in App (at withDevTools.js:18)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

我向 Gemini 询问了这个问题，它回答说要检查“Stacks”是否正确导出，所以我检查了它，但没问题（从我所看到的来看）

Answer 1

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { Stacks } from './Stack';

const App = () => {
  return (
    <NavigationContainer>
      <StatusBar style="auto" />
      <Stacks />
    </NavigationContainer>
  );
};

export default App;

问题出在你导入Stack文件的方式上。

import { Stacks } from './Stack';

尝试用这种方式导入文件。

import Stacks from './Stack';