代码之家  ›  专栏  ›  技术社区  ›  jrocc

反应导航中的选项卡导航器图标

  •  12
  • jrocc  · 技术社区  · 6 年前

    我正在使用React导航v2和React本机矢量图标。

    我正在尝试在React Native选项卡导航器中添加图标。

    如果图标不在选项卡导航器中,则会显示该图标。图标没有显示在选项卡导航器中,我找不到如何在选项卡导航器中添加图标的坚实示例。

    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',
          }
        },
      },
    )
    
    3 回复  |  直到 6 年前
        1
  •  6
  •   jrocc    6 年前

    知道了必须加

      tabBarOptions: { 
        showIcon: true 
      },
    

    之后,图标显示。

        2
  •  4
  •   msalihbindak    6 年前

    这对我有用,没有启用 showIcon:true .

    我正在使用 Ionicons 图标包。

    HomeScreen:{
        screen:HomeScreen,
        navigationOptions: {
          tabBarLabel:"Home",
          tabBarIcon: ({ tintColor }) => (
            <Icon name="ios-bookmarks" size={20}/>
          )
        },
      },
    
        3
  •  0
  •   AdrianHHH    5 年前

    设置activetintcolor也可以做到这一点。

                  tabBarOptions: {
                activeTintColor: '#e91e63'
              }