react-native实现底部导航栏图标问题

1 cnpm i react-native-svg react-native-iconfont-cli

2 react-native-svg 为iOS和Android上的React Native提供SVG支持，以及Web的兼容性

3 react-native-iconfont-cli 把iconfont.cn的图标转换成标准RN组件，不依赖字体，支持多色彩，支持热更新

下载后生成配置文件

npx iconfont-init

1 此时项目根目录会生成一个iconfont.json的文件，内容如下：
2 
3 {
4     "symbol_url": "请参考README.md，复制官网提供的JS链接",
5     "use_typescript": false,
6     "save_dir": "./src/iconfont",
7     "trim_icon_prefix": "icon",
8     "default_icon_size": 18
9 }

配置参数说明：

symbol_url

请直接复制iconfont官网提供的项目链接。请务必看清是.js后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js

然后执行

1 npx iconfont-rn

项目中使用

 1 import IconFont from '../src/iconfont';
 2 
 3 export const App = () => {
 4   return (
 5     <View>
 6       <IconFont name="alipay" size={20} />
 7       <IconFont name="wechat" />
 8     </View>
 9   );
10 };

 1  <Tab.Navigator
 2                 tabBarOptions={{
 3                     activeTintColor:'orange'
 4                 }}
 5                 >
 6                 <Tab.Screen
 7                     name="HomeTab"
 8                     component={HomeTab}
 9                     options={{
10                         tabBarLabel: '首页',
11                         tabBarIcon:({color,size})=>{
12                             return <IconFont name="shouye" color={color} size={size}/>
13                         }
14                     }} />
15                 <Tab.Screen
16                     name="Listen"
17                     component={Listen}
18                     options={{
19                         tabBarLabel: '我听',
20                         tabBarIcon:({color,size})=>{
21                             return <IconFont name="shoucang" color={color} size={size}/>
22                         }
23                     }} />
24                 <Tab.Screen
25                     name="Found"
26                     component={Found}
27                     options={{
28                         tabBarLabel: '发现',
29                         tabBarIcon:({color,size})=>{
30                             return <IconFont name="faxian" color={color} size={size}/>
31                         }
32                     }} />
33                 <Tab.Screen
34                     name="Account"
35                     component={Account}
36                     options={{
37                         tabBarLabel: "账户",
38                         tabBarIcon:({color,size})=>{
39                             return <IconFont name="user" color={color} size={size}/>
40                         }
41                     }} />
42             </Tab.Navigator>