Значки навигатора вкладок в React Navigation - PullRequest
0 голосов
/ 20 мая 2018

Я использую реагирующую навигацию 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',
      }
    },
  },
)

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

Это работает для меня, без включения showIcon:true.

Я использую Ionicons icon pack.

HomeScreen:{
    screen:HomeScreen,
    navigationOptions: {
      tabBarLabel:"Home",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="ios-bookmarks" size={20}/>
      )
    },
  },
0 голосов
/ 21 апреля 2019

Настройка activeTintColor также помогает.

              tabBarOptions: {
            activeTintColor: '#e91e63'
          }
0 голосов
/ 20 мая 2018

Разобрался, надо было добавить

  tabBarOptions: { 
    showIcon: true 
  },

После этого иконка показала.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...