TabNavigator 上未显示图标 [英] icons not showing on TabNavigator

问题描述

图标未显示在 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);

显示 TestComp4 的标签，但图标不可见.如何让图标在点击时显示和更改颜色?

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?

显示 TestComp4 的标签，但图标不可见.如何让图标在点击时显示和更改颜色?

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?

推荐答案

发现问题，就这样设置showIcon: true:

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

tabBarOptions: {
   showIcon: true
}

这篇关于TabNavigator 上未显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！