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

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

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

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

下载后生成配置文件

npx iconfont-init

此时项目根目录会生成一个iconfont.json的文件，内容如下：

{
    "symbol_url": "请参考README.md，复制官网提供的JS链接",
    "use_typescript": false,
    "save_dir": "./src/iconfont",
    "trim_icon_prefix": "icon",
    "default_icon_size": 18
}

配置参数说明：

symbol_url

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

 然后执行

 npx iconfont-rn 

项目中使用

import IconFont from '../src/iconfont';

export const App = () => {
  return (
    <View>
      <IconFont name="alipay" size={20} />
      <IconFont name="wechat" />
    </View>
  );
};

 <Tab.Navigator
                tabBarOptions={{
                    activeTintColor:'orange'
                }}
                >
                <Tab.Screen
                    name="HomeTab"
                    component={HomeTab}
                    options={{
                        tabBarLabel: '首页',
                        tabBarIcon:({color,size})=>{
                            return <IconFont name="shouye" color={color} size={size}/>
                        }
                    }} />
                <Tab.Screen
                    name="Listen"
                    component={Listen}
                    options={{
                        tabBarLabel: '我听',
                        tabBarIcon:({color,size})=>{
                            return <IconFont name="shoucang" color={color} size={size}/>
                        }
                    }} />
                <Tab.Screen
                    name="Found"
                    component={Found}
                    options={{
                        tabBarLabel: '发现',
                        tabBarIcon:({color,size})=>{
                            return <IconFont name="faxian" color={color} size={size}/>
                        }
                    }} />
                <Tab.Screen
                    name="Account"
                    component={Account}
                    options={{
                        tabBarLabel: "账户",
                        tabBarIcon:({color,size})=>{
                            return <IconFont name="user" color={color} size={size}/>
                        }
                    }} />
            </Tab.Navigator>