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

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>'

标签： typescriptreact-nativereact-navigation

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,
    }
  }
}});