navigation.navigate('Home') 在打字稿中显示一些错误

Question

当我使用 useNavigation 或 props { navigation } 使用 navigation.navigate('Home') 在屏幕之间导航时，打字稿返回错误 '"Main"' 类型的参数不能分配给 '{ key: string; 类型的参数；参数？：未定义；合并？：布尔值 |不明确的; } | { 名称：从不；键？： 字符串 |不明确的;参数：从不；合并？：布尔值 |不明确的; }' 这是什么意思？

下面是我的代码：

import React from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';

const Home: React.FC = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button onPress={() => navigation.navigate('Main')}>Navigate</Button>
    </View>
  );
};

export default React.memo(Home);

之前我使用过 React navigation v5 并使用该方法进行查找

感谢您的帮助

Answer 1

也许你想做这样的事情：

export type RootStackParamList = {
  Main: undefined;
  Home: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

export const RootNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="Main">
      <Stack.Screen
        name="Main"
        component={Main}
      />
      <Stack.Screen
        name="Home"
        component={Home}
      />
    </Stack.Navigator>
  );
};

然后在你的代码中做这样的事情：

type homeScreenProp = StackNavigationProp<RootStackParamList, 'Home'>;

const Home: React.FC = () => {
  const navigation = useNavigation<homeScreenProp>();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button onPress={() => navigation.navigate('Main')}>Navigate</Button>
    </View>
  );
};

Answer 2

这是因为您必须指定此类型，因为这将确保类型安全。

解决方案：

1 - 检查导航器的类型

// root.routes.tsx

import { createStackNavigator } from '@react-navigation/stack';

export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};

const RootStack = createStackNavigator<RootStackParamList>();

2 - 为您的根导航器指定全局类型

// navigation.d.ts

import { RootStackParamList } from '../routes/root.routes';

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

3 - 使用它！

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

navigation.navigate('Home');

4-额外！如果需要获取参数：

import { useRoute, RouteProp } from '@react-navigation/native';
import { RootStackParamList } from '../routes/root.routes';

const route = useRoute<RouteProp<RootStackParamList, 'Profile'>>();

const id = route.params.userId;

参考资料：

• @acro5piano 来自 https://github.com/react-navigation/react-navigation/issues/9741 的回答
• https://reactnavigation.org/docs/typescript/#annotating-usenavigation

Answer 3

我解决了这个问题，现在会有帮助，但这不是正确的输入：

type Nav = {
  navigate: (value: string) => void;
}

const { navigate } = useNavigation<Nav>()

function foo() {
  navigate("Home")
}

Answer 4

虽然其他答案涵盖了很多内容，但我想我可以通过描述

useNavigation

钩子中的用法以及将

{navigation}

通过道具传递到屏幕来补充这一点。

首先，设置堆栈导航器：

/**
* Types for Stack Navigator.
*/
export type StackParamList = {
  Main: undefined;
  Home: undefined;
};

const Stack = createStackNavigator<StackParamList>();

• 使用

  useNavigation

  挂钩时：

import { StackNavigationProp } from "@react-navigation/stack";

/**
 * Types for the Stack Navigator.
 */
export type StackNavigation = StackNavigationProp<StackParamList>;

const navigation = useNavigation<StackNavigation>();

• 将导航作为屏幕中的道具向下传递时：

/**
 * Types for passing the navigation props to screens in the Bottom Tab Navigator.
*/
export type StackNavigationProps = {
  navigation: StackNavigation;
};

const SomeScreenInTheStack = ({ navigation }: StackNavigationProps) => {
...
}

希望这对某人有用！

Answer 5

简单的方法是：

navigation.navigate('Main' 从未如此)}

Answer 6

我认为最好的方法是这样的：

1. 创建文件

   @types/index.ts

   
   在此文件中，粘贴代码：

type Routes = {
  routeNames: never[];
};

export type navigationProps = {
  navigate: (screen?: string) => void;
  goBack: () => void;
  reset: (index: number, routeNames: Routes[]) => void;
};

2. 现在您只需使用 navigationProps 作为 useNavigation 示例的泛型：

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation<navigationProps>();

Answer 7

您只需在屏幕名称上输入“类型”即可。就像：

const handleContinue = () => navigation.navigate('Login' as never);