React Navigation 中的选项卡导航器图标

Posted 2023-02-22

【中文标题】React Navigation 中的选项卡导航器图标

【英文标题】：Tab navigator icons in React Navigation

【发布时间】：2018-10-30 08:53:24

【问题描述】：

我正在使用 react-navigation v2 和 react 本机矢量图标。

我正在尝试在反应原生选项卡导航器中添加一个图标。

如果图标不在选项卡导航器中，则会显示该图标。该图标未显示在选项卡导航器中，我找不到如何在选项卡导航器中添加图标的可靠示例。

import React,  Component  from 'react';
import  StyleSheet, Text, View  from 'react-native';

import  createMaterialTopTabNavigator  from 'react-navigation'

import Home from '../HomePage.js'
import Profile s from '../ProfilePage.js'

import Icon from 'react-native-vector-icons/FontAwesome';

export const Tabs = createMaterialTopTabNavigator(
  
    HomePage: 
      screen: Home,

      navigationOptions: 
        tabBarLabel:"Home Page",
        tabBarIcon: ( tintColor ) => (
          <Icon name="home" size=30 color="#900" />
        )
      ,
    ,
    ProfilePage: 
      screen: Profile,
      navigationOptions: 
        tabBarLabel:"Profile Page",
        tabBarIcon: ( tintColor ) => (
          <Icon name="users" size=30 color="#900" />
        )
      
    ,
  ,

  
    order: ['HomePage', 'ProfilePage'],
    tabBarOptions: 
      activeTintColor: '#D4AF37',
      inactiveTintColor: 'gray',
      style: 
        backgroundColor: 'white',
      
    ,
  ,
)

【参考方案1】：

想通了必须添加

tabBarOptions:  
   showIcon: true 
,

在此之后图标显示。

【讨论】：

使用TabNavigator时，您在问题中的代码对我有用，没有添加任何其他选项

【参考方案2】：

这对我有用，没有启用showIcon:true。

我正在使用Ionicons 图标包。

HomeScreen:
    screen:HomeScreen,
    navigationOptions: 
      tabBarLabel:"Home",
      tabBarIcon: ( tintColor ) => (
        <Icon name="ios-bookmarks" size=20/>
      )
    ,
  ,

【参考方案3】：

您也可以在 Tab.Screen 的帮助下简单地添加它

首先从expo导入图标

import  Ionicons  from '@expo/vector-icons';

或从此处选择任何图标：https://icons.expo.fyi/

那就这样用吧

<Tab.Screen
    name="Feed"
    component=Feed
    options=
      tabBarLabel: 'Home',
      tabBarIcon: ( color, size ) => (
        <Ionicons name="home" color=color size=size />
      ),
    
  />

【参考方案4】：

设置 activeTintColor 也可以解决问题。

tabBarOptions: 
    activeTintColor: '#e91e63'