react-navigation ver6.0 在使用 navigation.navigate 时显示错误

Question

我所面临的

当我使用navigation.navigate('XXXPage') 时，react-navigation ver 6.0 显示以下错误。

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'.

我做了什么

我创建了以下文件来声明interface RoomParamList。

• navigation.d.ts

import { CompositeScreenProps } from "@react-navigation/native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";

import { MainStackParamList } from "./MainNavigator";
import { SettingsStackParamList } from "./SettingsNavigator";

type RootNavigationProps = CompositeScreenProps<
  NativeStackScreenProps<MainStackParamList>,
  NativeStackScreenProps<SettingsStackParamList>
>;

declare global {
  namespace ReactNavigation {
    interface RoomParamList extends RootNavigationProps {}
  }
}

这些是MainNavigator 和SettingsNavigator。

• 主导航器

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { MainPage } from "./main-navigator/MainPage";
import { SettingsNavigator } from "./SettingsNavigator";

export type MainStackParamList = {
  MainPage: undefined;
  SettingsPage: undefined;
};

const Stack = createNativeStackNavigator<MainStackParamList>();

export const MainNavigator = () => {
  return (
    <>
      <Stack.Navigator>
        <Stack.Screen
          name="MainPage"
          component={MainPage}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="SettingsPage"
          component={SettingsNavigator}
          options={{
            presentation: "transparentModal",
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </>
  );
};

• 设置导航器

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { SettingsPage } from "./settings-navigator/SettingPage";
import { SettingsEmailPage } from "./settings-navigator/SettingsEmailPage";
import { SettingsPasswordPage } from "./settings-navigator/SettingsPasswordPage";
import { SettingsUserAvatarPage } from "./settings-navigator/SettingsUserAvatarPage";
import { SettingsUsernamePage } from "./settings-navigator/SettingsUsernamePage";
import { DeleteAccountPage } from "./settings-navigator/DeleteAccountPage";

export type SettingsStackParamList = {
  SettingsPage: undefined;
  SettingsEmailPage: undefined;
  SettingsPasswordPage: undefined;
  SettingsBirthdayPage: undefined;
  SettingsProfilePage: undefined;
  SettingsUserAvatarPage: undefined;
  SettingsUsernamePage: undefined;
  DeleteAccountPage: undefined;
};

const Stack = createNativeStackNavigator<SettingsStackParamList>();

export const SettingsNavigator = () => {
  return (
    <>
      <Stack.Navigator
        initialRouteName={"SettingsPage"}
        screenOptions={{
          headerShown: true,
          headerLargeTitleShadowVisible: false,
          headerTransparent: true,
        }}>
        <Stack.Screen
          name="SettingsPage"
          component={SettingsPage}
          options={{
            headerShown: true,
            headerShadowVisible: false,
            headerTitle: "",
            headerLargeTitleShadowVisible: false,
            headerTransparent: true,
            contentStyle: {
              borderTopRightRadius: 12,
              borderTopLeftRadius: 12,
            },
          }}
        />
        <Stack.Screen
          name="SettingsUserAvatarPage"
          component={SettingsUserAvatarPage}
        />
        <Stack.Screen
          name="SettingsUsernamePage"
          component={SettingsUsernamePage}
        />
        <Stack.Screen name="SettingsEmailPage" component={SettingsEmailPage} />
        <Stack.Screen
          name="SettingsPasswordPage"
          component={SettingsPasswordPage}
        />
        <Stack.Screen name="DeleteAccountPage" component={DeleteAccountPage} />
      </Stack.Navigator>
    </>
  );
};

技术

• TypeScript(4.4.4)
• 反应（17.0.2）
• React Native(0.66.4)
• 反应导航(6)

Answer 1

我有同样的问题，我不知道为什么！它工作正常，然后，突然出现警告！

您可以通过这种方式解决该错误/警告...

拳头 在您的路线上，只需使用您的路线名称创建并导出一个界面。

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import { SignIn } from '../pages/SignIn'
import { SignUp } from '../pages/SignUp'


export type RootStackParamList = {
  SignIn: undefined
  SignUp: undefined
}

const { Navigator, Screen } = createNativeStackNavigator<RootStackParamList>()

export const AuthRoutes: React.FC = () => (
  <Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Screen name="SignIn" component={SignIn} />
    <Screen name="SignUp" component={SignUp} />
  </Navigator>

第二步 在您的 src 文件夹中创建另一个文件夹并将其命名为 @types。这里你要放一些文件来解决类型问题。

在@types 中，创建一个新文件，并将其命名为“navigation.d.ts”并在上面添加代码。

import { RootStackParamList } from '../routes/auth.routes'

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

之后，只需像您一样使用您的 navigation.navigate。

 <Styles.CreateAccountButton
          onPress={() => navigation.navigate('SignUp')}>
          <Icon name="log-in" size={20} color="#159957" />
          <Styles.CreateAccountButtonText>
            Criar uma conta
          </Styles.CreateAccountButtonText>
        </Styles.CreateAccountButton>

第三步 没有第三步！只要放松和享受，警告就消失了！