TypeScript не распознает, что React импортируется и используется в моей линте в VSCode

Question

Я создаю приложение, используя React Native с TypeScript.Я делаю навигацию с помощью React Navigation.

В моем навигаторе я использую иконки из React Native Elements для вкладок.Чтобы их использовать, мне нужно импортировать React.Но мой линтер не признает, что я им пользуюсь.Там написано:

[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 /> имеет ошибку:

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

В нем просто указаны цвет и тип соответственно.

Answer 1

Используйте расширение файла .tsx вместо .ts, если файл содержит синтаксис JSX, например <Icon ... />.