Question

创建一个底部标签导航器，由于某种原因，图标未显示。当我在底部标签导航器之外使用它时，将显示图标。我浏览了许多堆栈溢出解决方案，并实现了所有解决方案，但是由于某种原因，它仍然无法正常工作！

const tabNavigator = createBottomTabNavigator(
  {
  Home: {
    screen: EventNavigator, 
  defaultNavigationOptions: {
    tabBarLabel: 'Home',
    tabBarIcon : ({tintColor}) => (
      <Ionicons name='ios-home' size={30} color={tintColor}/>
    )
  },
},
  Categories: {
    screen: CategoryNavigator,
  defaultNavigationOptions: {
    tabBarLabel: 'Categories',
    tabBarIcon: ({tintColor}) => (
      <Ionicons name='ios-search' size={30} color={tintColor} />
    )
  },
  },
  Favourite: {
    screen: FavouriteNavigator,
    defaultNavigationOptions: {
      tabBarLabel: 'Favourite',
      tabBarIcon: ({tintColor}) => (
        <Ionicons name='ios-heart' size={30} color={tintColor}/>
      ),
    }
  },
},
{
  order: ['Home', 'Categories', 'Favourite'],
  tabBarOptions: {
    showIcon: true,
    activeTintColor: "#00ACF0",
    inactiveTintColor: 'gray',
    style: {
      backgroundColor: '#fff'
    },
  }
}
)

Answer 1

这是因为您将它们放在defaultNavigationOptions中，因此将其更改为navigationOptions。例如在首页：

Home: {
    screen: EventNavigator, 
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon : ({tintColor}) => (
            <Ionicons name='ios-home' size={30} color={tintColor}/>
        )
}

Answer 2

仅在ios设备中可见的ios图标，如果您使用的是android设备，则使用此代码成功运行两个设备：）

tabBarIcon:({navigation})=>(<Image source={require('...')} style={{...}}/>)

图标未显示在底部标签导航器中

2 个答案: