React Navigation 4.x tabBarOptions 不工作打字稿

Question

请不要推荐我使用 React Navigation 5.x，反正我使用 4.x 因为 switchNavigator。在将项目迁移到 typescript 后，我​​遇到了 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 的属性。它应该放在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,
    }
  }
}});