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

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

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

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

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

输入: npm install rnpm -g

输入: rnpm link (回车)

1. 在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就可以自动下载依赖包然后就可以成功显示

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!