React Native中MaterialTopTabNavigation导航与Props类型校验问题

我搭建了包含Shipping、Payment、Confirm三个页面的Material Top Tabs Navigator，点击确认按钮时需要从Shipping向Payment、Payment向Confirm传递order对象，同时页面需要访问navigation和route props，但当前配置下，createMaterialTopTabNavigator文件出现TypeScript错误。

相关代码 #

types.tsx #

import { MaterialTopTabScreenProps, MaterialTopTabNavigationProp,
} from "@react-navigation/material-top-tabs";
import { RouteProp } from "@react-navigation/native";
import { order } from "./utils/interface";

 export type CheckoutTopTabParamList = {
  Shipping: undefined;
  Payment: { order: order; };
  Confirm: { order: order; };
};

export type CheckoutTopTabProps<Screen extends keyof CheckoutTopTabParamList> =
  MaterialTopTabScreenProps<CheckoutTopTabParamList, Screen>;

// 我还尝试了另一种写法：
// export type CheckoutTopTabProps<T extends keyof CheckoutTopTabParamList> = {
//   navigation: MaterialTopTabNavigationProp<CheckoutTopTabParamList, T>;
//   route: RouteProp<CheckoutTopTabParamList, T>;
// };

Shipping页面：Checkout.tsx #

import { CheckoutTopTabProps } from "../../../types";
import { setOrder } from "../../../redux/slices/orderItemsSlice";

const Checkout = ({ navigation }: CheckoutTopTabProps<"Shipping">) => {

  const checkOut = () => {
    navigation.navigate("Payment", { order });
  };

return (
  <FormContainer>
   <KeyboardAwareScrollView>
    {/* 页面内容省略 */}
    <View style={{ width: "80%", alignItems: "center" }}>
          <Button title="Confirm" onPress={checkOut} />
        </View>
     </KeyboardAwareScrollView>
  </FormContainer>
  );
}

Payment页面：Payment.tsx #

import { CheckoutTopTabProps } from "../../../types";

export type PaymentProps = {
  order: order;
  navigation: CheckoutTopTabProps<"Payment">["navigation"];
  route: CheckoutTopTabProps<"Payment">["route"];
};

const Payment = ({ order, navigation, route }: PaymentProps) => {
return (
<View>
  {/* 页面内容省略 */}
  <View style={{ marginTop: 60, alignSelf: "center" }}>
          <Button
            title={"Confirm"}
            onPress={() => navigation.navigate("Confirm", { order })}
          />
        </View>
</View>
)
}

导航器文件：CheckoutTopTabNavigator.tsx #

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

// Screens
import Checkout from "../screens/Cart/Checkout/Checkout";
import Payment from "../screens/Cart/Checkout/Payment";
import Confirm from "../screens/Cart/Checkout/Confirm";
import { RootState } from "../redux/store";
import { useSelector } from "react-redux";

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
    const order = useSelector((state: RootState) => state.orderItems.order);
  return (
    <Tab.Navigator>
      <Tab.Screen name="Shipping" component={Checkout} />
      <Tab.Screen name="Payment" component={Payment} />
      <Tab.Screen name="Confirm" component={Confirm} />
    </Tab.Navigator>
  );
}

export default function CheckoutTopTabNavigator() {
  return <MyTabs />;
}
// 错误出现在此文件中

错误信息 #

错误截图显示类型不匹配，最终错误提示包含：(MaterialTopTabNavigationOptions, MaterialTopTabNavigationEventMap>')

尝试过的方案 #

我尝试通过Redux状态传递order props，修改导航器代码如下：

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
    const order = useSelector((state: RootState) => state.orderItems.order);
  return (
    <Tab.Navigator>
      <Tab.Screen name="Shipping" component={Checkout} />
      <Tab.Screen
        name="Payment"
        children={(props) => <Payment order={order} {...props} />}
      />
      <Tab.Screen
        name="Confirm"
        children={() => <Confirm order={order} />}
      />
    </Tab.Navigator>
  );
}

内容的提问来源于stack exchange，提问作者zackOverflow