如何在 react-navigation 库中键入导航？答案

【问题标题】：How to type navigation in react-navigation library?如何在 react-navigation 库中键入导航？
【发布时间】：2020-10-08 19:54:57
【问题描述】：

我正在使用react-navigation 5.5.1，一切正常，但我在使用打字稿时遇到了一些问题。

我尝试根据文档 (https://reactnavigation.org/docs/typescript/) 输入 navigation 属性，但看起来导航仍然是输入 any。

我错过了什么线索？

export type AppParamList = {
  Intro: undefined;
  Stories: undefined;
};

interface RoutesProps {}

const Stack = createStackNavigator<AppParamList>();

const Routes: FC<RoutesProps> = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Intro" component={Intro} />
          <Stack.Screen name="Stories" component={Stories} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

// Intro.tsx
import { StackNavigationProp } from '@react-navigation/stack';
import { AppParamList } from ../

type IntroScreenNavigationProp = StackNavigationProp<AppParamList, 'Intro'>;

type Props = {
  navigation: IntroScreenNavigationProp;
};

const Intro = ({ navigation }: Props): ReactElement => (
  <SafeAreaView>
    <Text>Intro</Text>
    <TouchableHighlight onPress={() => navigation.navigate('Stories')}>
      <Text>Go to stories</Text>
    </TouchableHighlight>
  </SafeAreaView>
);

【问题讨论】：

您的屏幕截图代码看起来与您粘贴的代码不同。
你说得对。我把它拿出来了——这个例子不需要。无论如何，我很傻 - 代码运行良好，我不得不更新我的 IDE。
我怀疑问题是否出在 IDE 上，navigate(args: 'Storied') 在语法上是错误的。它应该是navigate('Storied') 或navigate('Storied', {args: 'Storied'});
args 是 webstorm 可视化代码提示的一部分。这不是实际代码。
是的，我用过 VSCode - 也很棒！但我得到了免费的网络风暴，所以无法抗拒:)

标签： typescript react-native react-navigation

【解决方案1】：

我正在使用 WebStorm 2019.2 重现该问题。我刚刚更新到 2020.2，现在警告消失了。我假设这是我的 IDE 的问题:)

【讨论】：