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

pdkcd3nj  于 2023-01-25  发布在  React
关注(0)|答案(4)|浏览(196)

我使用的是react导航v2和react原生矢量图标。
我正在尝试在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',
      }
    },
  },
)
9jyewag0

9jyewag01#

想明白了得加上

tabBarOptions: { 
   showIcon: true 
},

此后,图标显示。

laik7k3q

laik7k3q2#

这对我来说很有效,不需要启用showIcon:true
我正在使用Ionicons图标包。

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

o2gm4chl3#

您也可以简单地在Tab. Screen的帮助下添加它
首先从博览会导入图标

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} />
      ),
    }}
  />
wfypjpf4

wfypjpf44#

设置activeTintColor也可以达到这个目的。

tabBarOptions: {
    activeTintColor: '#e91e63'
}

相关问题