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

Posted 2023-03-13

【中文标题】navigation.navigate(\'Home\') 在打字稿中显示一些错误

【英文标题】：navigation.navigate('Home') showing some error in typescriptnavigation.navigate('Home') 在打字稿中显示一些错误

【发布时间】：2021-10-17 02:57:15

【问题描述】：

当我使用 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 并使用该方法查找

感谢您的帮助

【问题讨论】：

navigation.navigate(...params)

看看为 useNavigation、Link、ref 等指定默认类型：reactnavigation.org/docs/typescript/…

【参考方案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>
  );
;

【讨论】：

你也应该做一些解释。让其他人更容易理解问题和解决方案

好的，也许这篇文章可以提供帮助。 benjaminwoojang.medium.com/…

我只是这样做，但导航功能不起作用总是在 Typescript 中返回错误消息，但在应用程序中没有错误

Cannot find name 'RootStackParamList'. 我在尝试时遇到了这个错误

@RahmanHaroon 您需要从第一个文件中导入它。 （此处导出：export type RootStackParamList）

【参考方案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');

参考：

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

【讨论】：

成功了！ @ambegossi