我想在React Native的标签导航中的底部标签中添加自定义图标

Question

import { createBottomTabNavigator } from 'react-navigation';

我要导入两个文件

import Profile      from './app/profile'
import Home     from './app/result'

创建一个可行的底部标签导航，但是我只需要显示自定义图标，即可在其中实际提供图标路径。

export default createBottomTabNavigator
({
    Home: { screen: Home },
    Profile:   { screen: Profile }
},

{
    initialRouteName: 'Discovery',
});

有什么办法吗？

Answer 1

您可以尝试使用此功能。这是我的代码的一部分。

ShoutOut: {
      screen:ShoutOut,
      navigationOptions: {
        tabBarLabel: 'ShoutOut',
        tabBarIcon: ({tintColor, activeTintColor}) => (
           <Icon name="ios-megaphone" size={30} color={tintColor} />
           )
      },
    },

因为你应该是...

    export default createBottomTabNavigator
    ({
        Home: { 
          screen: Home,
          navigationOptions: {
                tabBarLabel: 'Home',
                tabBarIcon: ({tintColor, activeTintColor}) => (
                   <Icon name="home" size={30} color={tintColor} />
                   )
              },
        },
        Profile:   { 
          screen: Profile,
          navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({tintColor, activeTintColor}) => (
                   <Icon name="user" size={30} color={tintColor} />
                   )
              }, 
     }
},

{
    initialRouteName: 'Discovery',
    tabBarOptions: {
       activeTintColor: '#fb9800',
       inactiveTintColor: '#7e7b7b',
       showIcon: true,
       style: { height: 54,backgroundColor: '#fff',borderTopWidth:0.5,borderTopColor: '#fb9800' },
       showLabel: true,
       labelStyle: {
        fontSize: 10,

       }
      }

});