React Native导入heroicons报错：Unexpected token '{' 求助

你遇到的Unexpected token '{'. import call expects exactly one argument错误，通常是Babel未正确处理ES模块解构导入，或是当前react-native-heroicons版本与你的Expo/React Native环境不兼容导致的。结合你的依赖配置和代码，以下是针对性解决方案：

方案1：调整Babel配置以支持解构导入 #

在项目根目录的babel.config.js中，添加必要插件确保Babel能解析解构语法：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'tailwindcss-react-native/babel',
      '@babel/plugin-proposal-export-namespace-from',
      '@babel/plugin-proposal-object-rest-spread'
    ],
  };
};

方案2：更换导入方式 #

尝试调整导入语法，适配不同版本的模块导出规则：

// 方式1：默认导入后解构
import HeroIconsOutline from "react-native-heroicons/outline";
const { UserIcon, ChevronDownIcon, SearchIcon, AdjustmentsIcon } = HeroIconsOutline;

// 方式2：直接导入单个图标文件
import UserIcon from "react-native-heroicons/outline/UserIcon";
import ChevronDownIcon from "react-native-heroicons/outline/ChevronDownIcon";

方案3：降级react-native-heroicons版本 #

你的项目使用Expo 46（对应React Native 0.69），react-native-heroicons 2.x对旧RN版本支持有限，降级到1.x版本可解决兼容问题：

npm install react-native-heroicons@1.3.0
# 或使用yarn
yarn add react-native-heroicons@1.3.0

降级后可保持原导入方式不变。

方案4：清除缓存并重新构建 #

Expo缓存可能导致模块解析异常，执行以下命令重置环境：

# 清除Expo缓存并重启项目
expo r -c

# 可选：清除npm缓存后重装依赖
npm cache clean --force
npm install

额外代码修复提示 #

你的HomeScreen代码中，<ChevronDownIcon>被嵌套在<Text>标签内，React Native不允许Text组件直接包裹非Text元素，需调整结构：

// 修改前
<Text className="font-bold text-xl">
    Current Location
    <ChevronDownIcon size={20} color="#00CCBB"/>
</Text>

// 修改后
<View className="flex-row items-center">
    <Text className="font-bold text-xl">Current Location</Text>
    <ChevronDownIcon size={20} color="#00CCBB"/>
</View>

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