美文网首页RN
android项目集成react-native-vector-i

android项目集成react-native-vector-i

作者: 张大娃创业笔记 | 来源:发表于2017-04-10 11:53 被阅读2930次

    前言

    我在android项目集成react-native-vector-icons时踩了一些坑,百度一下集成教程也没发现说明详细步骤和一些报错处理的文章,我在这里总结一下我的集成过程。

    1.安装react-native-vector-icons

    关于项目开发环境搭建和创建项目上一片文章已经写过,这里就默认你已经构建好了项目;进入项目等目录,然后执行命令:

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

    等待安装完成。

    2.修改项目配置文件

    (1)在项目目录node_modules/eact-native-vector-icons下,将Fonts文件夹中的内容复制到android/app/src/main/assets/fonts(注意小写字体文件夹)。
    (2)在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"
    

    (3)编辑android/settings.gradle对应位置添加+号所示代码:

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

    (4)编辑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')
    }
    

    (5)编辑android/app/src/main/java/com/.../MainApplication.java对应位置添加+号所示代码:

    package com.myapp;
    
    + import com.oblador.vectoricons.VectorIconsPackage;
    
    ....
    
      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
          new MainReactPackage()
    +   , new VectorIconsPackage()
        );
      }
    
    }
    

    (6)上面修改完成后,执行命令:

    react-native run-android
    

    重新编译项目。或许在编译项目会碰到如下报错:

    842789315583532812.png

    这个问题是因为你的文件权限可能为只读,所以不能进行操作,修改文件权限即可重新编译(文件夹——右键——属性——去掉只读勾选),如图:

    1.png

    查看效果

    在index.android.js中添加如下+号所示代码即可运行设备查看效果:

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    + import Icon from 'react-native-vector-icons/FontAwesome';
    export default class cityapp extends Component {
      render() {
        return (
           <View style={styles.contener}>
            + <Icon name="rocket" size={16} color="red"/>
                .....................................
          </View>
        );
      }
    }
    

    效果如下图


    665286980616360064.png

    OK,至此react-native-vector-icons就集成好了,观看icons的图标name可以到ionicons,去掉前缀icon-就可以在代码中使用,还有几个网站就不做介绍了,去官网查看react-native-vector-icons文档吧。

    相关文章

      网友评论

        本文标题:android项目集成react-native-vector-i

        本文链接:https://www.haomeiwen.com/subject/cphsattx.html