react-native-vector-icons ios android使用

最新推荐文章于 2024-01-22 15:02:04 发布

weixin_33877092

最新推荐文章于 2024-01-22 15:02:04 发布

阅读量127

点赞数

文章标签：移动开发 java python

原文链接：https://my.oschina.net/KJhulinhua/blog/1486080

版权

2019独角兽企业重金招聘Python工程师标准>>>

react-native-vector-icons 使用

介绍

react-native-vector-icons 一个比较好用的矢量图标库，需要做一些手工配置，本来我是不想用它的，奈何很多第三方库都比较依赖他。所以没办法，还是配置一下，就当着一劳永逸吧！！

具体详情，大伙可以查阅一下它的资料，这里主要讲述一下它的的ios、android的环境配置

安装

		npm install react-native-vector-icons --save

配置

ios
- 把 node_modules/react-native-vector-icons/Fonts 添加到xcode的文件目录下面，这一部分操作如果有不清楚的，可以参考这里
- 编辑Info.plist，添加一条Fonts provided by application数组，并加入node_modules/react-native-vector-icons/Fonts下的那几个选项
- react-native link
- 然后重新编译一下

android

编辑android/app/build.gradle文件，添加下面一句话

	project.ext.vectoricons = [iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy]

	apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

react-native-vector-icons库，将Fonts 文件夹拷贝到android/app/src/main/assets/fonts如果没有assets/fonts 新建即可在android/settings.gradle中增加如下脚本，

	include ':react-native-vector-icons'
	project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

编辑android/app/build.gradle添加

		apply plugin: 'com.android.application'

		android {
		  ...
		}

		dependencies {
		  compile fileTree(dir: 'libs', include: ['*.jar'])
		  compile "com.android.support:appcompat-v7:23.0.1"
		  compile "com.facebook.react:react-native:+"  // From node_modules
		  // 这一行是添加的，+号不用
		+ compile project(':react-native-vector-icons')
	}

最后一步：在android/app/src/main/java/你的包/MainApplication.java中添加

		import com.oblador.vectoricons.VectorIconsPackage;
		new VectorIconsPackage()

代码如下：


		package com.myapp;

		import com.oblador.vectoricons.VectorIconsPackage;

		....

		  @Override
		  protected List<ReactPackage> getPackages() {
		    return Arrays.<ReactPackage>asList(
		      new MainReactPackage()
		 , new VectorIconsPackage()
		    );
		  }

	}