React Native项目中React Icons无法正常工作的原因排查求助

问题根源 #

你用的react-icons是专为Web端React应用设计的，它输出的是基于DOM的SVG元素，但React Native没有DOM运行环境，直接使用必然触发报错。

解决方案 #

改用React Native专用的图标库，推荐两种适配方案：

1. 裸React Native项目：使用react-native-vector-icons #

• 安装依赖：

  npm install react-native-vector-icons
  # 或使用yarn
  yarn add react-native-vector-icons
  

• RN 0.60+版本会自动完成原生依赖链接，低于该版本需手动执行：

  npx react-native link react-native-vector-icons
  

2. Expo项目：使用@expo/vector-icons #

Expo项目无需额外链接原生依赖，直接安装即可：

npx expo install @expo/vector-icons

代码修改示例 #

以react-native-vector-icons为例，替换你代码中的图标部分，同时修复Text嵌套View的问题：

import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
// 替换为React Native专用图标库的导入
import { FontAwesome } from 'react-native-vector-icons';

const HomeScreen = () => {
    const navigation = useNavigation();

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

  return (
    <SafeAreaView>
        {/* 移除外层嵌套View的Text组件（RN中Text不能直接嵌套View） */}
        <View className="flex-row pb-3 items-center mx-4 space-x-2">
            <Image
                source={{
                    url:"https://links.papareact.com/wru",
                }}
                className="h-7 w-7 bg-gray-300 p-4 rounded-full"
            />
    
            <View>
                <Text className="font-bold text-gray-400 text-xs">
                    Deliver Now
                </Text>
                <Text className="font-bold text-xl">
                    Current Location
                    {/* 使用RN图标组件，可通过size、color自定义样式 */}
                    <FontAwesome name="beer" size={20} color="black" />
                </Text>
            </View>
        </View>
    </SafeAreaView>
  );
};

export default HomeScreen;

额外提示 #

你的代码中存在一个隐性问题：React Native的Text组件不允许直接嵌套View，外层包裹View的Text会导致渲染异常，已经在示例中移除该外层Text。

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