React Native react-native-vector-icons 使用小记

最新推荐文章于 2026-06-28 08:46:23 发布

转载最新推荐文章于 2026-06-28 08:46:23 发布 · 1.3w 阅读

收录于

app程序

本文详细介绍了如何在React Native项目中使用图标。包括安装react-native-vector-icons库、配置iOS和Android平台字体文件的方法，以及如何在组件中显示图标的具体步骤。

网页可以使用很多小图标，React Native 怎么使用图标呢，网上也有人使用过，总结下

http://www.cnblogs.com/moxiaoyan33/p/5482024.html
参考这个基本上会成功
ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧!

首先打开terminal进入到我们的工程文件夹下, (不会创建工程的请参考:http://blog.csdn.net/margaret_mo/article/details/51304062)

输入: npm install react-native-vector-icons –save (回车)

输入: npm install rnpm -g

输入: rnpm link (回车)

在Finder中用Xcode打开工程: …/Demo/ios/Demo.xcodeproj

(1).右键工程文件Add Files to “(你工程名)”

(2).选择node_modules/react-native-vector-icons/Fonts文件
这里写图片描述

(3).点击”完成”.
info.plist 文件会在第一层dict添加如下代码

    <key>UIAppFonts</key>
    <array>
      <string>Entypo.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Zocial.ttf</string>
    </array>
  </dict>
</plist>

看到有没有9个字体，如果使用那个字体就引入那个字体文件
这个文件是在 node_modules/react-native-vector-icons/目录下
如果你前面npm install react-native-vector-icons –save (回车)
这个安装正确一定可以看到
这里写图片描述

比如我要使用FontAwesome.js

//此处引入叫FontAwesome
//显示
//如果你用别的字体 import 时候要换成相应的字体，但是我怎么知道什么name可以显示图标，当你name=”address-book” 写错了，模拟器下面会显示所有图片名字。

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


class myfirst extends Component {

    render() {

            return (
              <View style={styles.container}>

                  <FontAwesome name="address-book" size={20} color="#4F8EF7" />
                  </View>
      )}
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});
AppRegistry.registerComponent('myfirst', () => myfirst);

android 版使用更简单
把node_modules/react-native-vector-icons/Fonts目录下字体文件全部拷到 android/app/src/main/assets/Fonts目录
这里写图片描述
然后在命令行进入你的工程 react-native run-android就可以自动下载依赖包然后就可以成功显示

标签

#react