icons not showing on TabNavigator

问题

Icon not showing in TabNavigator. My code:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

import { StackNavigator,TabNavigator } from 'react-navigation';


import TestComp1 from './src/components/TestComp1'
import TestComp2 from './src/components/TestComp2'
import TestComp3 from './src/components/TestComp3'
import TestComp4 from './src/components/TestComp4'
import TestComp5 from './src/components/TestComp5'

export default class myApp extends Component {
  render() {
    return (

        <MyApp />

    );
  }
}

const Tabs = TabNavigator({
  TestComp3: {screen:TestComp3},
  TestComp4: {
    screen:TestComp4,
    navigationOptions: ({ navigation }) => ({
        title: "TestComp4",
        tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="accessibility" size={20}/></View>
      })
  }
}, { 

  tabBarPosition: 'bottom',

  tabBarOptions: {
    activeTintColor: '#e91e63',
    inactiveBackgroundColor: 'green',   //This doesn't work
  },
});

const MyApp = StackNavigator({
  TestComp: {screen:TestComp1},
  TestComp2: {screen:TestComp2},
  Tabs: {
     screen: Tabs
  }
}, {
   initialRouteName: "Tabs"
});

AppRegistry.registerComponent('MyApp', () => MyApp);

The label is showing for TestComp4 but the icon is not visible. How can I get the icon to show and change color on click?

回答1:

Found the problem, just set showIcon: true like so:

tabBarOptions: {
   showIcon: true
}

来源：https://stackoverflow.com/questions/46749137/icons-not-showing-on-tabnavigator

标签

reactjs

react-native

react-navigation