react-native-vector-icons使用

最新推荐文章于 2024-08-09 07:17:58 发布

奋斗的orange

最新推荐文章于 2024-08-09 07:17:58 发布

阅读量1.6k

点赞数

分类专栏： reactnative 文章标签： react-native

本文链接：https://blog.csdn.net/u010940770/article/details/71275436

版权

本文详细介绍了如何在React Native项目中使用react-native-vector-icons，包括安装配置步骤和实际使用的示例代码，帮助开发者轻松添加和展示图标。

摘要由CSDN通过智能技术生成

react-native-vector-icons使用

1、安装及配置

（1）使用 npm install react-native-vector-icons --save命令进行安装；

（2）在xcode中打开项目，将node_modules/react-native-vector-icons下Fonts文件夹拖入xcode中，选择“Add to targets”和“Create groups”；
添加Fonts文件夹

(3)在Info.plist文件中添加属性“Fonts provided by application”
Info.plist文件添加属性

2、使用

下面实现个简单例子，将icons库中的图片全部展示出来，具体代码如下：
Home.js

import React from 'react';
import {
    ScrollView,
    Button,
    View,
    Text,
    StyleSheet,
} from 'react-native';

import {StackNavigator} from 'react-navigation';

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

class Home extends React.Component {
   

    static navigationOptions = {
        title: 'vector-icons',
        headerBackTitle: 'back'
    };

    render() {

        const items = [];
        items.push({name: 'facebook', title: 'Entypo'});
        items.push({name: 'facebook-f', title: 'EvilIcons'});
        items.push({name: 'twitter', title: 'FontAwesome', bgColor: '#0366d6'});
        items.push({name: 'github', title: 'Foundation', bgColor: '#0366d6'});
        items.push({name: 'google-plus', title: