1、需要装

yarn add react-native-svg
yarn add react-native-iconfont-cli -D

2、去Icon Front选择喜欢的图标

地址：www.iconfont.cn/
操作：选择图标->添加购物车->添加项目->复制Symbol代码

3、初始化icon font配置文件

npx iconfont-init

4、设置配置文件

{
  "symbol_url": "http://at.alicdn.com/t/c/font_3789803_ctsobz4fsm7.js",
  "use_typescript": true,
  "save_dir": "./src/assets/iconfont",
  "default_icon_size": 18
}

解释：

1. symbol_url，放复制的url，前面加http:
2. save_dir，放你想保存的地址

5、下载rn组件至指定目录

npx iconfont-rn

6、配置底部Tab

<Tab.Screen
    name="Listen"
    component={Listen}
    options={{
      tabBarLabel: '我听',
      headerTitle: '我听',
      tabBarIcon: ({color, size}) => (
        // name是你的图标名称
        <IconFont name="icon-yinle" size={size} color={color} />
      ),
}}
/>

8、测试效果

9、测试版本

  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-config": "^1.4.11",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-svg": "^13.6.0",
    ...
  },
  "devDependencies": {
    "react-native-iconfont-cli": "^2.2.4",
    "typescript": "^4.8.3"
    ...
  },