Проблемы с проверкой типов Маршруты на навигаторах в React Navigation 5 - PullRequest
Новая
       31

Проблемы с проверкой типов Маршруты на навигаторах в React Navigation 5

0 голосов
/ 26 апреля 2020

Этот код в основном взят из шаблона по умолчанию Expo tabs. Чтобы реализовать в нем TypeScript, я следовал инструкции Проверка типов с TypeScript на сайте React Navigation. Но я не могу понять это совершенно правильно.

Вот код: 

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import * as React from 'react';
import { RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import TabBarIcon from '../../components/TabBarIcon';
import HelpScreen from '../../screens/shared/HelpScreen';
import HomeStack from './HomeStackNavigator';

const INITIAL_ROUTE_NAME = 'Home';

type BottomTabNavigatorParamList = {
  Home: undefined;
  Help: undefined;
};

type BottomTabNavigatorRouteProp = RouteProp<BottomTabNavigatorParamList, 'Home'>;
type BottomTabNavigatorNavigationProp = StackNavigationProp<BottomTabNavigatorParamList, 'Home'>;

type Props = {
  route: BottomTabNavigatorRouteProp;
  navigation: BottomTabNavigatorNavigationProp;
};

const BottomTab = createBottomTabNavigator<BottomTabNavigatorParamList>();

const BottomTabNavigator = ({ navigation, route }: Props): JSX.Element => {
  navigation.setOptions({ headerTitle: getHeaderTitle(route) });

  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeStack}
        options={{
          title: 'Home Screen',
          tabBarIcon: ({ focused }): JSX.Element => <TabBarIcon focused={focused} name="cpu" />,
        }}
      />
      <BottomTab.Screen
        name="Help"
        component={HelpScreen}
        options={{
          title: 'Help',
          tabBarIcon: ({ focused }): JSX.Element => (
            <TabBarIcon focused={focused} name="help-circle" />
          ),
        }}
      />
    </BottomTab.Navigator>
  );
};

function getHeaderTitle(route: BottomTabNavigatorRouteProp): string {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;
ERRORS HERE =====>        ^^^^^               ^^^^^     <===== ERRORS HERE
  switch (routeName) {
    case 'Home':
      return 'How to get started';
    case 'Help':
      return 'How to use';
    default:
      if (__DEV__) {
        // eslint-disable-next-line no-console
        console.log('Should not happen');
      }
      break;
  }
  return '';
}

export default BottomTabNavigator;

Я получаю следующую ошибку в функции getHeaderTitle error:

TS2339: Property 'state' does not exist on type 'Pick "Home">, "key" | "name">'

...