图标不显示在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
,但图标不可见。如何让点击图标显示并更改颜色?
答
发现了问题,只需设置showIcon: true
像这样:
tabBarOptions: {
showIcon: true
}
哪个平台的测试,你呢? –
我正在测试Android – Somename
尝试设置图标查看flex到1并应用一些背景颜色以查看它是否填充了标签 –