reactjs - react-navigation 版本6.0 在使用 navigation.navigate 時顯示錯誤

我面臨的情況

當我使用 navigation.navigate('XXXPage') 時，react-navigation 版本 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。

• MainNavigator

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>
    </>
  );
};

• SettingsNavigator

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)
• React(17.0.2)
• React Native(0.66.4)
• React Navigation(6)

答案＃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>

第三步 沒有第三步！只要放鬆並享受，警告已經消失了！