Question

TabNavigator中未显示图标。我的代码：

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，但图标不可见。如何在点击时显示和更改颜色的图标？

Answer 1

发现问题，只需设置showIcon: true，如下所示：

tabBarOptions: {
   showIcon: true
}

TabNavigator上没有显示的图标

1 个答案: