reactjs - 反应导航错误-TypeScript-此表达式不可调用
问题描述
我正在尝试为升级到 React Navigation 5 时遇到的这个打字稿问题找到最佳实践。我得到的错误是
This expression is not callable.
Each member of the union type '{ <RouteName extends "Stack1Screen1" | "Home">(...args:
undefined extends SampleParamList1[RouteName] ? [RouteName] | [RouteName,
SampleParamList1[RouteName]] : [...]): void; <RouteName extends "Stack1Screen1" |
"Home">(route: { ...; } | { ...; }): void; } | { ...; }' has signatures, but none of those
signatures are compatible with each other.ts(2349)
这是我基本上使用的代码:
import { StackScreenProps } from '@react-navigation/stack';
export type SampleParamList1 = {
Stack1Screen1: undefined;
Home: undefined;
};
export type SampleParamList2 = {
Stack2Screen2: undefined;
Home: undefined;
};
type Props =
| StackScreenProps<SampleParamList1, 'Stack1Screen1'>
| StackScreenProps<SampleParamList2, 'Stack2Screen2'>;
const ThisScreen: React.FC<Props> = ({ navigation, route }) => {
const navToHome = () => navigation.navigate('Home');
};
将鼠标悬停在navigation.navigate('Home')
函数上会显示错误消息。关于如何解决这个问题的任何想法?谢谢!:)
解决方案
我用过这样的东西。
export type RandomParamList = {
ScreenRandom1: undefined;
ScreenRandom2: undefined | { screen: string }; // arguments
ScreenRandom3: undefined | { screen?: string, params: { param1: string } };
} ;
export type HomeParamList = {
HomeScreen1: undefined;
HomeScreen2: undefined | { screen: string };
HomeScreen3: undefined | { screen?: string, params: { param1: string } };
HomeScreen4: undefined;
HomeScreen5: undefined | { screen: string };
} & RandomParamList;
export type HomeNavProps<T extends keyof HomeParamList> = {
navigation: StackNavigationProp<HomeParamList, T>;
route: RouteProp<HomeParamList, T>;
};
const ThisScreen: React.FC<HomeNavProps> = ({ navigation, route }) => {
const navToHome = () => navigation.navigate('HomeScreen1');
const navToHome = () => navigation.navigate('Home'); // you will get error that Home is not allowed
};
推荐阅读
- python - 输入某个响应后,如何从我的代码中获得响应?
- html - 如何使用 HTML 和 CSS 并排对齐图像?
- itext - iText 7文本注释样式问题
- selenium - 在 c# selenium 中查找 XPATH
- javascript - 如何在谷歌脚本端设置 CORS 标头?
- javascript - 如何在包含多个图像的 div 中将切换功能应用于 div onclick 中的一个图像?
- r - 更新、删除、添加到 R 中的 DF
- telegraf - Telegraf 代理错误:解析 win_perf_counters 时出错,未定义但请求的输入:win_perf_counters
- angular - 最佳实践——使用 switchMap 而不是多个 Subscribe
- reactjs - 如何将此函数转换为类组件,以便我可以使用渲染调用返回?