javascript - typescript :类型上不存在属性 "navigation"省略 react 导航 v5

Question

我正在尝试通过本教程重构我的代码以从 javascript 到 typescript 的 react native:https://reactnavigation.org/docs/5.x/typescript/#nesting-navigators通过为 react 导航 v5 做类型我得到了一个错误:

Property 'navigation' does not exist on type 'Omit<{ dispatch(action:Readonly<{ type: string; payload?: object; source?: string; target?:string; }> | ((state: TabNavigationState) =>Readonly<...>)): void; ... 8 more ...; dangerouslyGetState():TabNavigationState<...>; } & ... 10 more ... &StackActionHelpers<...>, "dispatch" | ... 11 more ...'.

我的导航结构:

预期结果:

我希望我可以通过 Favorites Screen 访问路由和参数，并且可以像这样从那里导航到嵌套屏幕:(navigate("Root",{screen:"Something"})

代码适用于 javascript，但通过 typescript 存在类型错误。

我的代码:

类型.ts

export type FavoriteProps = CompositeNavigationProp<
  MaterialTopTabNavigationProp<FavoritesParamList>,
  NativeStackNavigationProp<RootStackParamList>
>;

FavoriteScreen.tsx

const FavoriteScreen = ({ route, navigation }: FavoriteProps) => {
  const favoriteMovies = useAppSelector((state) => state.users.favoriteMovies);
  const favoriteSeries = useAppSelector((state) => state.users.favoriteSeries);

  const changeRouteName = () => {
    if (route.name === "favMovies") {
      return true;
    } else {
      return false;
    }
  };
  const [movieTab, setMovieTab] = useState(changeRouteName);

AppNavigator.tsx

export type RootStackParamList = {
  Home: undefined;
  ShowAll: { id: number; name: string };
...
};

const Stack = createNativeStackNavigator<RootStackParamList>();
function AppNavigator() {
        <Stack.Navigator>
          <Stack.Screen name="Home" component={TabScreens} options={{ headerShown: false }} />
    </Stack.Navigator>

export const TabScreens = ({ navigation }) => {
      <Tab.Screen name="Favorites" component={FavStackScreen} options={{ tabBarLabel: strings.favorites }} />
}
...

底部标签导航器.tsx

export type BottomTabParamList = {
...
  Favorites: NavigatorScreenParams<FavoritesParamList>;
  User: UserParamList;
};


export type FavoritesParamList = { favMovies: undefined; favSeries: undefined };

const Tab = createBottomTabNavigator<BottomTabParamList>();

const FavTab = createMaterialTopTabNavigator<FavoritesParamList>();
function FavStackScreen() {
  return (
    <FavTab.Navigator
      tabBarOptions={{
        indicatorStyle: { backgroundColor: "tomato" },
        labelStyle: { fontSize: 14, fontFamily: "Montserrat-Bold" },
      }}
    >
      <FavTab.Screen name="favMovies" component={FavoriteScreen} options={{ tabBarLabel: strings.movies }} />
      <FavTab.Screen name="favSeries" component={FavoriteScreen} options={{ tabBarLabel: strings.series }} />
    </FavTab.Navigator>
  );
}

通过将类型更改为:

type FavoriteRouteProp = RouteProp<FavoritesParamList, "favMovies">;

type FavoriteNavigationProp = CompositeNavigationProp<
  MaterialTopTabNavigationProp<FavoritesParamList>,
  NativeStackNavigationProp<RootStackParamList>
>;

export type FavoriteProps = {
  navigation: FavoriteNavigationProp;
  route: FavoriteRouteProp;
};

Answer 1

这定义了 navigation Prop 的类型，而不是整个 Prop 对象

export type FavoriteProps = CompositeNavigationProp<
  MaterialTopTabNavigationProp<FavoritesParamList>,
  NativeStackNavigationProp<RootStackParamList>
>;

如果你想为 Prop 定义类型，使用:

export type FavoriteProps = CompositeScreenProps<
  MaterialTopTabScreenProps<FavoritesParamList>,
  NativeStackScreenProps<RootStackParamList>
>;

https://reactnavigation.org/docs/typescript