TypeScript 无法识别我在 VSCode 中的 linter 中正在导入和使用 React

Question

我正在使用 React Native 和 TypeScript 构建一个应用程序。我使用 React Navigation 进行导航。

在我的导航器中，我将 React Native Elements 中的图标用于选项卡。为了使用它们，我必须导入 React。但是我的 linter 无法识别我使用它。它说：

[ts] 'React' is declared but its value is never read.

这是我的代码：

import DetailScreen from "../screens/Detail";
import HomeScreen from "../screens/Home";
import LoadingScreen from "../screens/Loading";
import OptionsScreen from "../screens/Options";
import SettingsScreen from "../screens/Settings";
import React from "react";
import { Platform } from "react-native";
import { Icon } from "react-native-elements";
import {
  createBottomTabNavigator,
  createDrawerNavigator,
  createStackNavigator,
  createSwitchNavigator,
  NavigationSceneRendererProps,
  NavigationTransitionProps,
  StackViewTransitionConfigs,
  TabScene,
  TransitionConfig
} from "react-navigation";

// Some other code

const HomeStack = createStackNavigator(
  { DetailScreen, HomeScreen, OptionsScreen },
  // TODO: Rename the config from 'CustomTransitionConfig' to 'dynamicModalTransition'.
  { initialRouteName: "HomeScreen", transitionConfig: dynamicModalTransition }
);

HomeStack.navigationOptions = {
  tabBarLabel: "Home",
  tabBarIcon: ({ tintColor }: TabScene) => <Icon name="ios-home" type="ionicon" color={tintColor} />
};

const SettingsStack = createStackNavigator({ SettingsScreen });

SettingsStack.navigationOptions = {
  tabBarLabel: "Settings",
  tabBarIcon: ({ tintColor }: TabScene) => <Icon name="ios-cog" type="ionicon" color={tintColor} />
};

const MainNavigator = Platform.select({
  ios: createBottomTabNavigator({ HomeStack, SettingsStack }),
  android: createDrawerNavigator({ HomeStack, SettingsStack })
});

const RootSwitch = createSwitchNavigator(
  { LoadingScreen, MainNavigator },
  { initialRouteName: "MainNavigator" }
);

export default RootSwitch;

这里发生了什么？为什么 TypeScript 无法识别 React？

这个的一个子<Icon />错误是s 属性每个都有错误：

[ts] '>' expected.
[ts] Cannot find name 'name'.
any

它只是分别说颜色和类型。

Answer 1

使用文件扩展名.tsx，而不是.ts在文件中包含JSX语法一样<Icon ... />。