React Native 中使用图标
程序员文章站
2022-06-15 22:57:31
...
在React Native 中使用 react-native-vector-icons 插件,android 和 ios 的安装步骤是不一样的
ios安装步骤:
- npm install --save react-native-vector-icons
- 复制 npm 上 react-native-vector-icons 上的 List of all available fonts to copy & paste in 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>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> </array>
- 打开项目中的 ios 包中的 nativeApp
- 把 info.plist 在编辑器打开 内容是按照 key - value 保存的,把以上复制的内容按照 key - value 的格式粘贴到 dict 字典里面
- cd 到 ios 包下
- 执行 pod install
- cd …/
- npm run ios
android 安装步骤:
- npm install --save react-native-vector-icons
- 在 android/app/build.gradle 的文件添加下面这句话 注意不是:android/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
接下来就可以使用 图标,到以下网址选图标
图标地址
https://oblador.github.io/react-native-vector-icons/
引入图标 要用谁的图标就引入谁的
import AntDesign from 'react-native-vector-icons/AntDesign'
······
······
······
<AntDesign name="upcircleo" size={100} color="green" />
以上就是android 和 ios 使用图标的步骤啦
npm插件地址
喜欢可以点个赞哦,笔芯 ~
推荐阅读
-
react中Suspense的使用详解
-
react中使用css的7中方式(应该是最全的)
-
React组件中的this的具体使用
-
react中使用css的7中方式(最全总结)
-
React Native开发中自动打包脚本
-
React 与 React-Native 使用同一个 meteor 后台
-
react-native-vector-icons 安装、使用
-
react-native 在新版Xcode(10+)中运行出现的问题: node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
-
ios开发中React Native 集成分享与第三方登录功能模块开发教程
-
React-Native中使用验证码倒计时的按钮实例代码