web-dev-qa-db-fra.com

Onglet Navigateur dans React Navigation

J'utilise react-navigation v2 et réagis des icônes vectorielles natives.

J'essaie d'ajouter une icône dans un navigateur de l'onglet natif de réaction.

L'icône apparaît si ce n'est pas dans le navigateur onglet. L'icône n'apparaît pas dans le navigateur d'onglets et je ne trouve pas d'exemple concret sur la manière d'ajouter une icône dans un navigateur d'onglets.

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',
      }
    },
  },
)
reactjsreact-nativeiconsreact-navigation
14
jrocc

Compris qu'il fallait ajouter

tabBarOptions: { 
   showIcon: true 
},

Après cela l'icône a montré.

7
jrocc

Cela fonctionne pour moi, sans permettre showIcon:true.

J'utilise le pack d'icônes Ionicons.

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

Définir activeTintColor fait également l'affaire.

tabBarOptions: {
    activeTintColor: '#e91e63'
}
0
Robby3bergen