Question

我想在typescript组件中使用react hook。

我将react-navigation用于路由器。

使用npx react-native init MyTSProject --template react-native-template-typescript@6.2.0

创建项目

版本是

"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

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

2 个答案: