Реагировать Навигация TypeScript: Аргумент типа ... не может быть назначен параметру типа 'BottomTabNavigatorConfig'

Question

Я создаю приложение React Native и обрабатываю навигацию с помощью React Navigation V2.

Я буквально скопировал и вставил следующий код из документации :

const MainTabs = createBottomTabNavigator(
  { Home: HomeStack, Settings: SettingsStack },
  {
    navigationOptions: ({ navigation }: NavigationScreenProps) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-information-circle${focused ? "" : "-outline"}`;
        } else if (routeName === "Settings") {
          iconName = `ios-options${focused ? "" : "-outline"}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
)

По какой-то причине машинопись выдает следующую ошибку:

[ts]
Argument of type '{ navigationOptions: ({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }; }' is not assignable to parameter of type 'BottomTabNavigatorConfig'.
  Types of property 'navigationOptions' are incompatible.
    Type '({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }' is not assignable to type 'NavigationBottomTabScreenOptions | ((navigationOptionsContainer: NavigationScreenConfigProps & { navigationOptions: NavigationScreenProp<NavigationRoute<NavigationParams>, NavigationParams>; }) => NavigationBottomTabScreenOptions) | undefined'.

Как это может быть?Что я делаю не так?

Answer 1

По моему опыту реагировать на навигацию, есть проблемы с типами свойств navigationsOptions.Решение здесь состоит в том, чтобы сделать правильные типы для библиотеки , чтобы быть очень точным в отношении типов, которые у вас есть.

Насколько я могу видеть здесь, слабым местом является аргумент функции tabBarIconтип.Добавьте явный тип к распакованному аргументу:

...
  tabBarIcon: ({ focused, tintColor }:TabBarIconProps) => {
...

Тип возвращаемого значения должен быть получен автоматически.

Answer 2

В зависимости от того, что ожидает опора, вам может понадобиться разыграть то, что вы ей передаете, в выражении.Так что-то вроде:

navigationOptions: ({ navigation as any }: any)