打字稿：类型上不存在属性“导航”省略反应导航v5

Posted 2023-02-21

【中文标题】打字稿：类型上不存在属性“导航”省略反应导航v5

【英文标题】：Typescript: Property "navigation" does not exist on type Omit react navigation v5

【发布时间】：2021-11-01 19:50:59

【问题描述】：

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

类型'Omit | （（状态：TabNavigationState）=> 只读<...>)): 无效； ... 8 更多 ...;危险地获取状态（）： TabNavigationState<...>; & ... 还有 10 个 ... & StackActionHelpers<...>, "调度" | ... 还有 11 个 ...'。

我的导航结构：

预期结果：

我希望我可以通过收藏夹屏幕访问路线和参数，并可以从那里导航到嵌套屏幕，如下所示：(navigate("Root",screen:"Something")

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

我的代码：

types.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  />

...

BottomTabNavigator.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;
;

【参考方案1】：

通过将类型更改为：

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

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

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

【参考方案2】：

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

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

如果要定义道具的类型，请使用：

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

https://reactnavigation.org/docs/typescript

【讨论】：

感谢您的回答，我正在使用 react navigation v5，在这个版本中没有像 CompositeScreenProps 这样的东西，但我可以这样做：输入 FavoriteRouteProp = RouteProp ;类型 FavoriteNavigationProp = CompositeNavigationProp, NativeStackNavigationProp >;导出类型 FavoriteProps = 导航：FavoriteNavigationProp;路线：FavoriteRouteProp； ;