React Native默认组件导入时出现Unexpected Token ["default"]错误

这个问题是react-native-typescript-transformer在转换默认导入的JSX组件时的一个bug——它错误地将默认导入的组件编译成了react_native_fast_image_1["default"]这样的形式，而JSX标签名不允许包含方括号，因此触发语法错误。下面是几个可行的解决方法：

方法1：尝试使用命名导入 #

很多React Native第三方库（包括react-native-fast-image）同时支持默认导出和命名导出，你可以直接导入命名组件来规避转换问题：

import { FastImage } from 'react-native-fast-image';

export const Component = () => <FastImage />;

这是最简洁的解决方式，优先尝试这个方案。

方法2：手动将默认导入赋值给变量 #

如果库仅提供默认导出，你可以先把默认导入的内容赋值给一个普通变量，再在JSX中使用这个变量：

import FastImageDefault from 'react-native-fast-image';
const FastImage = FastImageDefault;

export const Component = () => <FastImage />;

这种方式能避免转换器生成带方括号的非法JSX标签代码，绕过语法错误。

方法3：升级或替换转换器 #

这个问题大概率是旧版本react-native-typescript-transformer的兼容性问题，你可以先尝试升级到该工具的最新版本，看是否已经修复了这个bug。

如果升级后问题仍存在，更推荐改用React Native官方的TypeScript支持方案——现在RN已经原生支持TypeScript，不需要依赖第三方转换器了。你可以移除react-native-typescript-transformer，按照官方文档配置TypeScript环境（确保tsconfig.json中jsx字段设置为react-native或react-jsx，并安装@types/react、@types/react-native等类型依赖），从根源上解决这类转换兼容性问题。

内容的提问来源于stack exchange，提问作者Explosion Pills