React Navigation 4.x tabBarOptions не работает Typescript

Question

Пожалуйста, не рекомендуйте мне использовать React Navigation 5.x, я использую 4.x из-за switchNavigator, в любом случае. У меня возникают проблемы с React Navigation 4.x после того, как я перенес свой проект в машинописный текст, это часть кода, в которой появляется ошибка.

 const MainTabs = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.inicio_onFocus : Images.inicio_onBlur;
        return <Image source={image} />;
      },
      tabBarOptions: {
        activeTintColor: colors.active,
        inactiveTintColor: colors.background,
        style: {
          marginTop: 10,
          height: 65,
          backgroundColor: colors.title,
          shadowColor: colors.inactive,
          borderTopColor: 'transparent',
          borderTopWidth: 0,
          elevation: 5,
          shadowOpacity: 5,
          shadowRadius: 10,
        },
      },
      tabBarLabel: 'INICIO',
    },
  },
  Vacations: {
    screen: VacationsStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.vacaciones_onFocus : Images.vacaciones_onBlur;
        return <Image source={image} />;
      },
      /*
      tabBarOptions: {
        activeTintColor: colors.active,
        inactiveTintColor: colors.background,
        style: {
          marginTop: 10,
          height: 65,
          backgroundColor: colors.title,
          shadowColor: colors.inactive,
          borderTopColor: 'transparent',
          borderTopWidth: 0,
          elevation: 5,
          shadowOpacity: 5,
          shadowRadius: 10,
        },
      },
      */
      tabBarLabel: 'VACACIONES',
    },
  },
  HoursReport: {
    screen: HoursReportStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.imputar_onFocus: Images.imputar_onBlur;
        return <Image source={image} />;
      },
      /*
      tabBarOptions: {
        activeTintColor: colors.active,
        inactiveTintColor: colors.background,
        style: {
          marginTop: 10,
          height: 65,
          backgroundColor: colors.title,
          shadowColor: colors.inactive,
          borderTopColor: 'transparent',
          borderTopWidth: 0,
          elevation: 5,
          shadowOpacity: 5,
          shadowRadius: 10,
        },
      },
      */
      tabBarLabel: 'IMPUTAR',
    },
  },
  ExpenseReport: {
    screen: ExpenseReportStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.rendir_onFocus : Images.rendir_onBlur;
        return <Image source={image} />;
      },
      /*
      tabBarOptions: {
        activeTintColor: colors.active,
        inactiveTintColor: colors.background,
        style: {
          marginTop: 10,
          height: 65,
          backgroundColor: colors.title,
          shadowColor: colors.inactive,
          borderTopColor: 'transparent',
          borderTopWidth: 0,
          elevation: 5,
          shadowOpacity: 5,
          shadowRadius: 10,
        },
      },
      */
      tabBarLabel: 'RENDIR',
    },
  },
});

каждая часть кода, которая включает tabBarOptions получить эту ошибку.

The expected type comes from property 'navigationOptions' which is declared here on type 'NavigationRouteConfig<NavigationBottomTabOptions, NavigationTabProp<NavigationRoute<NavigationParams>, any>, unknown>'

Answer 1

Кажется, что tabBarOptions не в том месте, может быть, этот способ работает для вас:

tabBarOptions не является атрибутом navigationOptions. Он должен go внутри второго параметра createBottomTabNavigator, как, например, initialRouteName.

const MainTabs = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.inicio_onFocus : Images.inicio_onBlur;
        return <Image source={image} />;
      },
      tabBarLabel: 'INICIO',
    },
  },
  Vacations: {
    screen: VacationsStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.vacaciones_onFocus : Images.vacaciones_onBlur;
        return <Image source={image} />;
      },
      tabBarLabel: 'VACACIONES',
    },
  },
  HoursReport: {
    screen: HoursReportStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.imputar_onFocus: Images.imputar_onBlur;
        return <Image source={image} />;
      },
      tabBarLabel: 'IMPUTAR',
    },
  },
  ExpenseReport: {
    screen: ExpenseReportStack,
    navigationOptions: {
      tabBarIcon: ({focused}) => {
        const image = focused ? Images.rendir_onFocus : Images.rendir_onBlur;
        return <Image source={image} />;
      },
      tabBarLabel: 'RENDIR',
    },
  },
}, {
  tabBarOptions: {
    activeTintColor: colors.active,
    inactiveTintColor: colors.background,
    style: {
      marginTop: 10,
      height: 65,
      backgroundColor: colors.title,
      shadowColor: colors.inactive,
      borderTopColor: 'transparent',
      borderTopWidth: 0,
      elevation: 5,
      shadowOpacity: 5,
      shadowRadius: 10,
    }
  }
}});