React Native + Typescript：如何在堆栈屏幕组件中使用 toggleDrawer？答案

【问题标题】：React Native + Typescript: How to use toggleDrawer in a stack screen component?React Native + Typescript：如何在堆栈屏幕组件中使用 toggleDrawer？
【发布时间】：2020-06-29 20:00:07
【问题描述】：

我的问题很简单：navData 的类型应该是什么？

我想从堆栈屏幕组件的标题切换抽屉，但 Typescript 抱怨，因为在 navData.navigation 上不存在 toggleDrawer，因为该组件是堆栈屏幕组件。我想避免做navData: any 那么好的类型应该是什么？

import React from "react";
import { View, Text, Platform } from "react-native";
import {
  NavigationStackScreenComponent,
  NavigationStackOptions
} from "react-navigation-stack";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import CustomHeaderButton from "../../components/UI/HeaderButton";

const ProductsOverviewScreen: NavigationStackScreenComponent = props => {
  return (
    <View>
      <Text>ProductsOverviewScreen</Text>
    </View>
  );
};

ProductsOverviewScreen.navigationOptions = (
  navData // What is the type?
): NavigationStackOptions => {
  return {
    headerTitle: "All Products",
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          onPress={() => navData.navigation.toggleDrawer()}
        />
      </HeaderButtons>
    ),
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Cart"
          iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
          onPress={() => navData.navigation.navigate({ routeName: "Cart" })}
        />
      </HeaderButtons>
    )
  };
};

export default ProductsOverviewScreen;

【问题讨论】：

我做的一个作弊是将其保留为“任何”，然后将其记录到控制台。控制台会给你它的类型。再次，它是一个廉价的作弊:)

标签： javascript reactjs typescript react-native react-navigation

【解决方案1】：

一种快速而肮脏的方法可能是稍微调整它，以便您可以键入函数本身，而不仅仅是道具：ProductsOverviewScreen.navigationOptions: NavigationStackScreenComponent["navigationOptions"] = (navData) =>...。但不能保证它会起作用。

如果可以的话，更好的选择是从库中导入正确的道具（如果文档中没有运气，请检查 repo 并查看导出的类型供您使用）。

【讨论】：