React Native Expo配置Sanity后出现RNSVGGroup错误，求修复方案

我是React Native新手，正在跟随YouTube教程开发应用，完成Sanity后端配置后，应用出现RNSVGGroup错误，严格按照教程步骤操作仍未解决。

相关代码 #

HomeScreen代码 #

import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';

const HomeScreen = () => {

    const navigation = useNavigation();
    const [featuredCategories, setFaaturedCategories] = useState([]);

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,
        })
    }, []);

    useEffect(() => {
        client.fetch(`
        *[_type =="featured"]{
            ...,
            restaurants[]->{
              ...,
              dishes[]->
            }
          }
        `).then(data => {
            setFaaturedCategories(data);
        });
    }, []);

    return (
        <SafeAreaView className="bg-white pt-5">
            {/* Header */}
            <View className="flex-row pb-3 items-center mx-4 space-x-2">
                <Image
                    source={{
                        uri: 'https://links.papareact.com/wru',
                    }}
                    className="h-7 w-7 bg-gray-300 p-4 rounded-full"
                />
                <View className="flex-1">
                    <Text className="font-bold text-gray-400 text-xs">Deliver Now!</Text>
                    <Text className="font-bold text-xl">Current Location
                        <ChevronDownIcon size={20} color="#00CCBB" />
                    </Text>
                </View>
                <UserIcon size={35} color="#00CCBB" />
            </View>
            {/* Search box */}
            <View className="flex-row items-center space-x-2 pb-2 mx-4">
                <View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
                    <MagnifyingGlassIcon size={20} color="gray" />
                    <TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
                </View>
                <AdjustmentsHorizontalIcon color="#00CCBB" />
            </View>
            {/* Body */}
            <ScrollView className="bg-gray-100" contentContainerStyle={{ paddingBottom: 100 }}>
                {/* Categories */}
                <Categories />

                {/* Featured Rows */}
                <FeaturedRow
                    id="123"
                    title="Featured"
                    description="paid placemnts from our partners"
                />
                {/* Tasty Discount */}
                <FeaturedRow
                    id="1234"
                    title="Tasty Discount"
                    description="Everyone's been enjoying these juicy Discount"
                />
                {/* Offers near you */}
                <FeaturedRow
                    id="12345"
                    title="Offers near you"
                    description="Why not support your local restaurant tonight!"
                />

            </ScrollView>
        </SafeAreaView>
    );
}

export default HomeScreen;

sanity.js代码 #

import sanityClient from '@sanity/client'
import imageUrlBuilder from '@sanity/image-url'

const client = sanityClient({
    projectId: "gbg977pk",
    dataset: "production",
    useCdn: true,
    apiVersion: "2021-10-21",
});

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);

export default client;

错误截图 #

可能的解决方向 #

• 确认依赖安装：react-native-heroicons依赖react-native-svg，执行以下命令确保依赖正确安装：

  npm install react-native-svg
  # iOS环境额外执行
  cd ios && pod install && cd ..
  

• 清除项目缓存后重启：

  npx react-native start --reset-cache
  

• 检查图标组件导入：确认react-native-heroicons/outline中的图标名称拼写无误，导入路径正确。
• 验证原生项目配置：iOS端检查Podfile是否包含react-native-svg的依赖；Android端检查settings.gradle和app/build.gradle中是否正确配置了该库的链接。

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