首页 文章

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

提问于
浏览 次
1

我正在使用react-navigation v2并对原生矢量图标做出反应 .

我正在尝试在反应原生标签导航器中添加一个图标 .

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

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',
      }
    },
  },
)
reactjs react-native icons react-navigation

2 回答

  • 1

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

    我正在使用 Ionicons 图标包 .

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

    弄清楚必须添加

    tabBarOptions: { 
    showIcon: true 
  },

    在此之后图标显示 .

    回复于

相关问题