React Native navigation.navigate('Home ')显示 typescript 中的一些错误

dfddblmv  于 2022-11-25  发布在  React
关注(0)|答案(7)|浏览(154)

当我使用useNavigation或从props {navigation}使用navigation.navigate('Home ')在屏幕之间导航时,typescript返回错误类型'"Main"'的参数无法分配给类型' {key:字符串;参数?:未定义;是否合并?:布尔的|未定义;}| {姓名:永不;键?:字符串|未定义;参数:从不;合并?:布尔的|undefined ;}'是什么意思?
下面是我代码:

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和使用该方法的工作find
谢谢你的帮助

guicsvcw

guicsvcw1#

也许你想这样做:

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

ecbunoof2#

这是因为您必须指定这个型别,因为这样可以确保型别安全。
解决方法:
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');

参考文献:

ovfsdjhp

ovfsdjhp3#

我解决了这个问题,很简单:

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

const { navigate } = useNavigation<Nav>()

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

sigwle7e4#

虽然其他答案涵盖了大量内容,但我想我可以通过描述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) => {
...
}

希望这对某人有用!

brvekthn

brvekthn5#

有关更多详细信息,请参阅此article

crcmnpdw

crcmnpdw6#

我认为最好的办法是这样的:
1.在此文件中创建一个@types/index.ts文件,并粘贴代码:

routeNames: never[];
};

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

1.现在您只需要使用navigationProps作为useNavigation示例的泛型:

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

 const navigation = useNavigation<navigationProps>();
pdsfdshx

pdsfdshx7#

你可以在屏幕名称上加上一个类型。就像:

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

相关问题