react-native-vector-icons（android）的安装与使用

第一步：在react-native 工程目录下通过npm安装react-native-vector-icons

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

第二步：分别为android和ios做一些相应的配置

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"

在node-modules 中找到

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')

include ':react-native-vector-icons'的作用时在编译android项目的时候

react-native-vector-icons会作为一个module加入编译。

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

react-native-vector-icons的具体路径在 android/app/build.gradle 添加：compile project(':react-native-vector-icons')

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 getPackages() {    return Arrays.asList(      new MainReactPackage() , new VectorIconsPackage()    );  }}

然后在此运行项目即可。

测试代码：

import React, {  Component} from 'react';import {  Platform,  StyleSheet,  Text,  View} from 'react-native';import Icon from 'react-native-vector-icons/FontAwesome';const instructions = Platform.select({  ios: 'Press Cmd+R to reload,\n' +    'Cmd+D or shake for dev menu',  android: 'Double tap R on your keyboard to reload,\n' +    'Shake or press menu button for dev menu',});type Props = {};export default class App extends Component < Props > {  render() {    return (                                            Welcome to React Native!                          To get started, edit App.js                          {instructions}                  );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});

react-native-vector-icons（android）的安装与使用_第1张图片

更多相关文章

随机推荐