TS2786 TypeScript不重新组合UI-Kitten组件

Question

IDE上的错误消息：

TS2786：“ApplicationProvider”不能用作JSX组件。 它的实例类型'ApplicationProvider‘不是一个有效的JSX元素。 由'render()‘返回的类型在这些类型之间不兼容。 类型'React.ReactNode‘不能指定为键入React.ReactNode 类型“{}”不能指定为键入“ReactNode”。 键入“{}”不能指定键入“ReactPortal”。

不仅仅是ApplicationProvider，而且我从UI-kitten/components中导入的每个组件都存在“不是一个有效的JSX元素”错误。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the UI Kitten TypeScript template
 * https://github.com/akveo/react-native-ui-kitten
 *
 * Documentation: https://akveo.github.io/react-native-ui-kitten/docs
 *
 * @format
 */

import React from 'react';
import {
  ImageProps,
  StyleSheet,
} from 'react-native';
import {
  ApplicationProvider,
  Button,
  Icon,
  IconRegistry,
  Layout,
  Text,
} from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';

/**
 * Use any valid `name` property from eva icons (e.g `github`, or `heart-outline`)
 * https://akveo.github.io/eva-icons
 */
const HeartIcon = (props?: Partial<ImageProps>): React.ReactElement<ImageProps> => (
  <Icon {...props} name='heart'/>
);

export default (): React.ReactFragment => (
  <>
    <IconRegistry icons={EvaIconsPack}/>
    <ApplicationProvider {...eva} theme={eva.light}>
      <Layout style={styles.container}>
        <Text style={styles.text} category='h1'>
          Welcome to UI Kitten 
        </Text>
        <Text style={styles.text} category='s1'>
          Start with editing App.js to configure your App
        </Text>
        <Text style={styles.text} appearance='hint'>
          For example, try changing theme to Dark by using eva.dark
        </Text>
        <Button style={styles.likeButton} accessoryLeft={HeartIcon}>
          LIKE
        </Button>
      </Layout>
    </ApplicationProvider>
  </>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    textAlign: 'center',
  },
  likeButton: {
    marginVertical: 16,
  },
});

复制：

npx react-native init MyApp --template @ui-kitten/template-ts

在更新@type/react最新版本(18.0.6)时，似乎可以解决这个问题。但世博并不支持18版，这似乎也是最近才提出来的一个问题。

Answer 1

解这里.

1. 将"resolutions": { "@types/react": "~17.0.21" },添加到package.json
2. 删除node_modules
3. 用yarn install或同等方式重新安装