简体   繁体   English

为什么我的反应图标不能正常工作?

[英]Why are my react icons not functioning properly?

attached is the code below for a little app I am making with React Native.下面是我用 React Native 制作的一个小应用程序的代码。 I was trying to use react icons but for some reason they are not working and idk why.我试图使用反应图标,但由于某种原因,它们不起作用,我不知道为什么。 I imported them and everything and they should be working but I keep getting this error.我导入了它们和所有东西,它们应该可以工作,但我不断收到这个错误。 在此处输入图像描述 Does anyone know why my react icons are not functioning properly?有谁知道为什么我的反应图标不能正常工作? Thanks in advance.提前致谢。

import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { FaBeer } from 'react-icons/fa';

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

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

  return (
    <SafeAreaView>
        <Text className="text-red-500">
            <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
                        <FaBeer />
                    </Text>
                </View>
            </View>
        </Text>
    </SafeAreaView>
  );
};

export default HomeScreen;

react-icons doesn't work with react native (i think). react-icons 不适用于本机反应(我认为)。 You need to use react-native-vector-icons ( https://www.npmjs.com/package/react-native-vector-icons )您需要使用 react-native-vector-icons ( https://www.npmjs.com/package/react-native-vector-icons )

you cant use normal react icons since in react native icons can be either an image or can be SVG, so for SVG icons, you need to add react-native-svg package.你不能使用普通的反应图标,因为反应原生图标可以是图像也可以是 SVG,所以对于 SVG 图标,你需要添加react-native-svg ZEFE90A8E604A7C840E88D03A7D6

You should install as @dev404 said https://github.com/oblador/react-native-vector-icons你应该像@dev404 所说的那样安装https://github.com/oblador/react-native-vector-icons

Also do follow their installation process for both android and ios.也请遵循 android 和 ios 的安装过程。

YOu can check the below available icon sets.您可以查看以下可用的图标集。

在此处输入图像描述

Hope it helps, feel free for doubts希望对你有帮助,有疑问欢迎交流

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM