React Native Elements 不能用作 JSX 组件 - Typescript答案

【问题标题】：React Native Elements cannot be used as a JSX component - TypescriptReact Native Elements 不能用作 JSX 组件 - Typescript
【发布时间】：2022-06-22 09:24:54
【问题描述】：

'Text' cannot be used as a JSX component.

我以 Text 元素为例，但它发生在所有反应原生元素上。

代码示例：


  return (
    <>
      <TechnicianDetailCard technicianData={technicianData} />
      <TouchableOpacity
        onPress={() => {
          saveContact();
        }}
      >
        <Text>Add To contacts</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => {
          copyPhoneNumber();
        }}
      >
        <Text>Copy Phone Number</Text>
      </TouchableOpacity>
    </>
  );

有什么解决办法吗？

【问题讨论】：

标签： typescript react-native

【解决方案1】：

首先，检查是否所有包含一些 JSX 的文件都以 .tsx 扩展名命名。其次，检查项目根目录中tsconfig.json 的compilerOptions。根据 react-native 文档，它应该包含类似于以下内容。

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

这两个步骤都记录在here 和here。

如果以上不适用于您，请尝试更新您的@types/react-native。如果您使用的是npm，那么它的工作原理如下。

npm install --save @types/react-native

如果您使用的是yarn，那么它的工作原理如下。

yarn add @types/react-native

【讨论】：

它们都不起作用:(

【解决方案2】：

问题是该项目正在采取 @react-native-types 来自另一个 node_modules 项目

【讨论】：