![](/img/trans.png)
[英]How to use stackNavigation with drawerNavigation in react native and use toggleDrawer() in stackNavigation component
[英]React Native + Typescript: How to use toggleDrawer in a stack screen component?
我的问题很简单: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;
一种快速而肮脏的方法可能是稍微调整它,以便您可以输入函数本身,而不仅仅是道具: ProductsOverviewScreen.navigationOptions: NavigationStackScreenComponent["navigationOptions"] = (navData) =>...
。 不能保证它会起作用。
如果可以的话,更好的选择是从库中导入正确的道具(如果文档中没有运气,请检查存储库并查看导出了哪些类型供您使用)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.