React-Native: @ant-design/react-native

react-native-vector-icons

这个组件主要是配套的图标引入,在没有配置的情况下,直接使用 Icon 组件会不显示图标,或者显示错误。

操作步骤如下:

1、安装 react-native-asset

react-native-asset - npm

官方说的是全局安装 react-native-asset ,我把他安装在项目里面了。

2、在根目录下新建react-native.config.js文件 添加内容

module.exports = {
  assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};

3、在项目根目录命令行运行

▶ react-native-asset

info Linking ttf assets to iOS project 
WARN ERRGROUP Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking ttf assets to Android project 

4、检查下图是否生成对应内容,有对应内容说明导入成功,此时图标显示正常。

5、如果引入组件报错,请在babel.config.js中添加

plugins: [
    ['import', {libraryName: '@ant-design/react-native'}],
]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
根据引用,在安装@ant-design/react-native时,不再需要手动链接(@ant-design/icons-react-native),而是可以使用自动链接功能。只需要使用命令`npm install @ant-design/icons-react-native --save-dev`来安装@ant-design/icons-react-native即可。此外,可以在`node_modules/@ant-design`文件夹下找到安装的文件。 根据引用,可以使用命令`react-native -v`来检查是否成功安装了react-native。 根据引用,示例代码展示了如何全局使用ant-design-mobile组件。官方文档中的示例是按需引入的,如果要全局使用,需要手动引入相应的组件文件。示例代码中引入了Button和InputItem组件,并在App组件中使用了这些组件。 所以,ant-design-mobile是一个基于React Native的UI组件库,可以通过自动链接或手动引入组件文件的方式来使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [react native 0.70版本使用ant-design-mobile-rn及icons字体图标库](https://blog.csdn.net/weixin_43233914/article/details/126849915)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [react native 使用ant-design-mobile-rn的icon字体库](https://blog.csdn.net/weixin_43233914/article/details/119450451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值