react native 0.70版本使用ant-design-mobile-rn及icons字体图标库

前言

本文基于

• “react-native”: “^0.70.0”
• “@ant-design/react-native”: “^5.0.1”

1.安装依赖

yarn add @ant-design/react-native --save
1

2.组件使用

示例为全局使用的方式，官方文档的示例是按需引入的，因此全局使用的需要自己去 node_modules/@ant-design/react-native/lib/ 找对应的组件名称

import React from 'react';
import Button from '@ant-design/react-native/lib/button';
import InputItem from '@ant-design/react-native/lib/input-item';

function App() {
  return (
    <>
      <Button>Start</Button>
      <Button type="primary">primary</Button>
      <InputItem
        value={''}
        placeholder="hello world"
      >
        输入框
      </InputItem>
    </>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.链接字体图标

注意事项：

1. 官网文档更新不及时，目前显示的还是 react-native link @ant-design/icons-react-native，如果直接使用，则会直接报link错误
2. 手动链接(react-native link)已从 react-native 0.69 中删除，以支持自动链接功能，需使用另外一个插件react-native-asset
3. 安装 @ant-design/react-native时会自动安装 @ant-design/icons-react-native ，无需自己安装,可查看 node_modules/@ant-design 文件夹

3.1.链接字体图标文件到android / ios文件夹下

yarn add react-native-asset --save
1

根目录新建 react-native.config.js

• assets 对应的是存放字体图标文件的路径

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

执行链接

yarn react-native-asset
1

3.2.检查是否链接成功

android文件夹: android\app\src\main\assets

4.使用字体图标

import React from 'react';
import Button from '@ant-design/react-native/lib/button';
import InputItem from '@ant-design/react-native/lib/input-item';
import Icon from '@ant-design/react-native/lib/icon';

function App() {
  return (
    <>
      <Button>Start</Button>
      <Button type="primary">primary</Button>
      <InputItem
        value={''}
        placeholder="hello world"
      >
        输入框
      </InputItem>
      <Icon name="account-book" size="md" color="red" />
      <Icon name="delete" size="md" color="red" />
    </>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。