首页 > 其他分享 >react-native 在ios中使用react-native-vector-icons图标

react-native 在ios中使用react-native-vector-icons图标

时间:2023-12-14 16:25:32浏览次数:30  
标签:icons FontAwesome5 react vector ttf native

github 地址:https://github.com/oblador/react-native-vector-icons

1.引入

npm install --save react-native-vector-icons
  1. ios项目引入
    进入node_modules/react-native-vector-icons文件夹,将Fonts文件夹拖拽到Xcode的项目根目录下,
    然后在Info.plist文件中添加如下内容:
<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

打开是这样的:

然后重新运行项目即可

标签:icons,FontAwesome5,react,vector,ttf,native
From: https://www.cnblogs.com/ikuns/p/17901399.html

相关文章

  • react-native中嵌套的WebView发版后未更新问题
    问题使用了react-native-webview的WebView嵌套h5页面,但是当h5发版之后,重新打开app,h5还是发版前的页面。并且这个缓存严重,每次都要清理缓存或者重装app,页面不能及时更新,影响用户体验。解决rn项目中,在h5链接后边拼接时间戳,代码如下:注意:这里缓存使用的是@react-native-async-sto......
  • React-native ios运行报错 No bundle URL present
    新建项目报错如下:需要手动生成ios下的main.jsbundle文件解决方法:1、生成main.jsbundle文件,在终端项目目录下执行:react-nativebundle--entry-fileindex.js--bundle-output./ios/main.jsbundle--platformios--assets-dest./ios--devfalse或在package.json里面添加以下执......
  • react_hooks系列 useCallback,高阶函数memo
    react_hooks的useCallback,高阶函数memo一、概念和作用1、memo高阶函数:memo解决的是函数式组件的无效渲染问题,当函数式组件重新渲染时,会先判断数据是否发生了变化。相当于类组件的PureComponent(默认提供ShouldComponentUpdate)2、useCallback:1)、useCallback会返回一个函数的memoiz......
  • React Hooks 钩子特性
    人在身处逆境时,适应环境的能力实在惊人。人可以忍受不幸,也可以战胜不幸,因为人有着惊人的潜力,只要立志发挥它,就一定能渡过难关。Hooks是React16.8的新增特性。它可以让你在不编写class组件的情况下使用state以及其他的React特性。ReactHooks表现形式是以use开头......
  • HarmonyOS:NativeWindow 开发指导
     场景介绍NativeWindow是HarmonyOS本地平台化窗口,表示图形队列的生产者端。开发者可以通过NativeWindow接口进行申请和提交Buffer,配置Buffer属性信息。针对NativeWindow,常见的开发场景如下:● 通过NativeWindow提供的Native API接口申请图形Buffer,并将生产图形内容写入图......
  • React 逃离闭包陷阱
    众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React 代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编写复......
  • react设置多个className
    react设置多个className 在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式。123456比如说有一个固定样式"title":<divclassName="title">标题</div>,然后还要一个点击高亮的样式:<divclassName={index=== this.sta......
  • react_hooks系列 useState
    一、作用:useState让函数式组件也可以处理状态。二、格式:1、定义状态:const[状态名,更新状态的函数]=React.useState(初始值|函数);​如:1)、基本类型的状态声明一个新的叫做“count”的state变量,初始值为0。​const[count,setCount]=React.useState(0);//useS......
  • react_hooks系列 useEffect
    一、作用​可以使得你在函数组件中执行一些带有副作用的方法。​每当React组件更新之后,就会触发useEffect,在第一次的render和每次update后的useEffect触发,不用再去考虑“初次挂载”还是“更新”。React保证了每次运行effect的同时,DOM都已经更新完毕。......
  • Native Rawfile开发指导
     场景介绍开发者可以通过本指导了解在HarmonyOS应用中,如何使用Native Rawfile接口操作Rawfile目录和文件。功能包括遍历、打开、搜索、读取和关闭Rawfile。接口说明接口名描述NativeResourceManager *OH_ResourceManager_InitNativeResourceManager(napi_env......