react native 0.72版本使用react-native-vector-icons报错

mengsir2

已于 2023-11-14 14:41:08 修改

阅读量778

点赞数 2

CC 4.0 BY-SA版权

文章标签： react native

于 2023-10-17 19:34:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42839797/article/details/133891941

本文介绍了如何在ReactNative项目中手动安装和链接react-native-vector-icons，包括使用yarn和react-native-asset库，以及手动导入和使用Icon的方法。同时提到了手动link可能导致的二次打包错误，并推荐相关解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

版本：
“react-native”: “^0.72.5”,
“react-native-vector-icons”: “^10.0.0”

按照React Native Elements教程安装react-native-vector-icons。

yarn add react-native-vector-icons

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

该指令npx react-native link react-native-vector-icons 报link未识别。说明当react-native 库已经没有了link指令。为了解决该问题，需要手动添加react-native-asset库。

安装react-native-asset

yarn add react-native-asset --save

根目录新建 react-native.config.js

module.exports = {
    assets: ['node_modules/react-native-vector-icons']
};

手动link

yarn react-native-asset

使用react-native-vector-icons库里的Icon

完成上述步骤后，按照React Native Element教程使用Icon。但是教程比较模糊，这样讲更详细一些。

node_modules/@types/react-native-vector-icons文件夹里如下图：
在这里插入图片描述
可以看到里面有 AntDesign、FontAwesome、MaterialIcons等包。手动导入想要的包名。再在react-native-vector-icons directory网站里查找想要的图标。

import Icon from 'react-native-vector-icons/AntDesign';

function VideoItem(props: { video: VideoParam }): JSX.Element {
    const { video } = props;
    return (
        <View style={styles.videoContainer}>
            <ImageBackground source={{ uri: video.image }} resizeMode="cover" style={styles.image}>
                <View>
                    <Icon
                        name='playcircleo' />
                </View>
            </ImageBackground>
        </View>
    )
}