如何将 react 17 的新 JSX 转换与 react-native 0.64.0 (rc4) 结合使用？答案

【问题标题】：How to use new JSX transform of react 17 with react-native 0.64.0 (rc4)?如何将 react 17 的新 JSX 转换与 react-native 0.64.0 (rc4) 结合使用？
【发布时间】：2021-03-08 15:56:24
【问题描述】：

问题基本上在标题中，但我已经使用 react-native 0.64.0-rc.4 创建了演示项目。这个版本的 RN 使用 react-17，所以应该也可以使用新的 JSX 转换。问题是它是否真的可能，以及如何。当我在App.js 中注释import React from 'react'; 行时，由于未知的React 变量，应用程序会创建一个渲染错误。

【问题讨论】：

标签： react-native

【解决方案1】：

您可以参考this comment

我遇到了同样的问题，只需更改 babel.config.js 即可解决。

这是我的babel.config.js。

密钥是useTransformReactJSXExpermiental: true 和runtime: 'automatic'

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],
    '@babel/preset-typescript',
  ],
  sourceMaps: 'inline',
  plugins: [
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
    '@babel/proposal-object-rest-spread',
    ['babel-plugin-styled-components'],
    'react-native-reanimated/plugin',
  ],
};

【讨论】：

在处理新的 RN TS 项目时，这对我起到了作用。在旧版本中，我们只需要包含 babel 配置规范即可使用新的 JSX 转换

【解决方案2】：

在metro.config.js 中，将experimentalImportSupport 设置为true：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true,
      },
    }),
  },
};

【讨论】：

在处理新的 RN TS 项目时，这对我起到了作用。在旧版本中，我们只需要包含 babel 配置规范即可使用新的 JSX 转换