React-navigation v5 TypeScript:如何要求参数?

时间:2020-04-20 08:39:16

标签: typescript react-navigation

我已经创建了一个接口文件:

import { CompositeNavigationProp } from '@react-navigation/native'
import { MaterialBottomTabNavigationProp } from '@react-navigation/material-bottom-tabs'
import { StackNavigationProp } from '@react-navigation/stack'

export type ITabOneParams = {}
export type ITabTwoParams = {}
export type IStackOneParams = {
  headerTitle: string
  itemId: string
}

export type IHomeTabsParams = {
  TabOne: ITabOneParams
  TabTwo: ITabTwoParams
}

export type IHomeStackParams = {
  HomeTabs: IHomeTabsParams
  StackOne: IStackOneParams
}

export {
  MaterialBottomTabNavigationProp,
  StackNavigationProp,
  CompositeNavigationProp
}

这里是使用这些接口的组件:

import React, { PureComponent } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Button } from 'react-native-paper'
import {
  CompositeNavigationProp,
  MaterialBottomTabNavigationProp,
  StackNavigationProp,
  IHomeStackParams,
  IHomeTabsParams
} from '../../interfaces/router'

export default class TabOne extends PureComponent<OwnProps> {
  render () {
    return (
      <View>
        <Text>TabOne</Text>
        <Button
          onPress={() => this.props.navigation.navigate('StackOne')}
        >
          Go to StackOne
        </Button>
      </View>
    )
  }
}

type TabOneScreenNavigationProp = CompositeNavigationProp<
  MaterialBottomTabNavigationProp<IHomeTabsParams, 'TabOne'>,
  StackNavigationProp<IHomeStackParams>
>

export interface OwnProps {
  navigation: TabOneScreenNavigationProp
}

我希望this.props.navigation.navigate('StackOne')会引发类型错误,因为根据我的类型定义,同时需要headerTitleitemId参数。不会发生这种情况,打字稿认为此方法正确。在这种情况下如何使打字稿抛出错误?

0 个答案:

没有答案