react-native-vector-icons使用遇到的大坑

buildupchao 发布于2019-08-26 11:32 / 3188人阅读

摘要：第一次写文章也是第一次用有需要改正的地方希望大家多多指点由于公司业务以及需求的扩大用写已经满足不了当前的需求急需一个处理数据流简单用户体验好及入手快的框架在查了好多框架之后最终选择了简称开始用的时候就是从看文档开始还有就是希望大家在学习

第一次写文章,也是第一次用react-native,有需要改正的地方希望大家多多指点.由于公司业务以及需求的扩大,用JQ写App已经满足不了当前的需求,急需一个处理数据流简单、用户体验好及入手快的框架,在查了好多框架之后,最终选择了react-native(简称RN).

开始用RN的时候就是从看文档开始,还有就是希望大家在学习的时候多加一下相关的技术群,学习起来更加的方便,根据文档开始进行环境搭建,编写第一个程序Hello word,一些环境搭建遇到的问题我就不说了,现在说一下在使用react-native-vector-icons的时候的坑,每个项目都会用到字体图标,那么在我用到的时候就遇到了大坑,

控制台会出现如上图所示的报错,解决办法很如下步骤:

第一步:

1)将(./node_modules/react-native/local-cli/core/__fixtures__/files/package.json)package.json删掉,
2)在android/app/build.gradle中增加如下脚本
project.ext.vectoricons = [
    iconFontNames: [ "MaterialIcons.ttf", "EvilIcons.ttf" ]        
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

第二步:

1)在node_modules中找到react-native-venctor-icons库,将Fonts文件拷贝到android/app/src/main/assets如果没有assets就新建一个,将Fonts放到assets下即可
2)在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")

第三步:

1)在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:+"  
    ....
    compile project(":react-native-vector-icons")
}

第四步:

1)在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()
    );
  }

}

云服务器 GPU云服务器使用遇到问题布局遇到的问题 php开发遇到的难点学习遗传算法遇到的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107091.html

iOS原生混合RN开发最佳实践

摘要：交流群也定期更新最新的学习资料给大家，谢谢大家支持小伙伴们扫下方二维码加入技术交流群 iOS原生混合RN开发详解做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid，有一些Hybrid的开发经验，目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid，在早期的时候，可能部分同学也接触过PhoneGap等hybrid技术，今天我们就简单来...

B0B0 2019-08-23 11:49 评论0 收藏0
在react-native中添加高可维护的iconfont字体

摘要：没关系，笔者已经为你们准备好了，请保存到文件中，假设你的文件名叫和你刚才保存的字体文件在一起，方便管理复制字体这个插件包有好多套字体，我们可以需要把自己的也复制到包中对应文件夹，当然了，不可能手动复制，笔者从来都是解放双手的。字体图标盛行的年代，在项目里使用一套不失真又可以随意改变大小颜色的图标，是多么舒服的一件事。这里要推荐iconfont.cn，超多免费图标，当然了，你的专属美工...

CarterLi 2019-08-26 12:00 评论0 收藏0
一步一步开发安卓下的react-native应用系列之进阶篇

摘要：首先我们打开命令行，切换到项目根目录下，输入安装完成后，请注意，需要把目录下的所有字体文件拷贝到目录下，如果没有该目录，请自行创建。看过我前面文章的朋友们现在应该能正常运行自己的第一个RN应用了，那都是小儿科，现在我们来做点进阶一点的东西。这篇文章有一些属于干货性的东西，请仔细阅读。特别需要注意我加粗的部分。首先我们来看下js文件结构，在项目初始化成功...

xioqua 2019-06-26 17:14 评论0 收藏0
React Native图片资源使用的优美方案

摘要：图片资源作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与的图片使用策略也有所不同。端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的...

fireflow 2019-05-23 14:32 评论0 收藏0