2017-10-14 61 views
0

圖標不顯示在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並應用一些背景顏色以查看它是否填充了標籤 –

回答

0

發現了問題,只需設置showIcon: true像這樣:

tabBarOptions: { 
    showIcon: true 
}