如何用打字稿声明反应导航参数？

Question

我想将typescript与我的react hook组件一起使用。

我将react-navigation用于路由器。

使用npx react-native init MyTSProject --template [email protected]创建项目

版本是

"react": "16.8.6",
"react-native": "0.60.5",

这是我尝试的内容

RootScreen.tsx

import React from 'react';

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

interface IRootScreen {
  navigation: () => void;
}

const RootScreen: React.FC<IRootScreen> = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('MainStack')}>
        <Text style={{ fontSize: 40 }}>I am RootScreen</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default RootScreen;

我可以成功导航到MainStack。

但是navigation.navigate('MainStack')将在我的编辑器Visual Studio代码上显示type () => void no argument navigate。

我的界面有什么问题，还是我仍然需要对代码做点什么？

任何帮助将不胜感激。

Answer 1

找到解决方案

import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

interface IRootScreen {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}

Answer 2

但是navigation.navigate（'MainStack'）将显示类型（）=> void无参数导航到

因为这就是您定义navigation道具类型的方式：

interface IRootScreen {
 navigation: () => void;
}

您需要使用NavigationStackProp：

import { NavigationStackProp } from 'react-navigation-stack';

interface IRootScreen {
  navigation: NavigationStackProp;
};

阅读官方文档：https://reactnavigation.org/docs/en/typescript.html