我想在 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,
       }
      }
});