使用 TypeScript 和 expo 通过反应导航设置 Stack 时出错

Question

loginStack.tsx

当我将鼠标悬停在 createStackNavigator() 声明中的 screens 参数上时，会弹出此错误。这是其中一个 screens 的示例（它们都是一样的）：

home.tsx

import React from 'react';
import { View, Text } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Home() {
    return (
        <View style={globalStyles.container}>
            <Text>Home Screen</Text>
        </View>
    )
}

我已经 运行 这些命令来安装必要的库：

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/native
npm install @react-navigation/stack

Answer 1

您正在尝试以旧方式定义屏幕，即 react-navigation v4 方式。从您的导入中，很明显您使用的是库的 v5 或 v6。要在 v5 或 v6 中定义屏幕，您可以执行以下操作，

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/home';
import Login from '../screens/login';
import Registration from '../screens/registration';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Registration" component={Registration} />
    </Stack.Navigator>
  );
}

现在在您的 App.js 或您的主要入口点，

您可以通过将其包装在 NavigationContainer

中来使用此堆栈

参考React Navigation Official Documentation了解详细信息。