图标不显示在TabNavigator上

问题描述:

图标不显示在TabNavigator中。我的代码:图标不显示在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但图标是不可见的。如何让点击图标显示并更改颜色?

该标签显示为TestComp4,但图标不可见。如何让点击图标显示并更改颜色?

+0

哪个平台的测试,你呢? –

+0

我正在测试Android – Somename

+0

尝试设置图标查看flex到1并应用一些背景颜色以查看它是否填充了标签 –

发现了问题,只需设置showIcon: true像这样:

tabBarOptions: { 
    showIcon: true 
}