如何为两个带有React导航的两个屏幕拥有唯一的图标

Question

我在react Native中有一个底部标签导航器，我将屏幕放入其中：

const AppStack = createBottomTabNavigator(
    {
        FirstPage : {
            screen: FirstPage,
            navigationOptions: {
                tabBarVisible: true,
            }
        },
        SecondPage : {
            screen: SecondPage,
            navigationOptions: {
                tabBarVisible: true,
                tabBarButtonComponent: () => false
            }
        },
        ThirdPage : {
            screen: ThirdPage,
            navigationOptions: {
                tabBarVisible: true,
            }
        },
    },
    {
        defaultNavigationOptions: ({navigation}) => ({
            tabBarIcon: ({focused}) => {
                if (navigation.state.routeName === 'FirstPage' || navigation.state.routeName === 'SecondPage') {
                    icon = focused ? require('iconPathFocused.png') : require('iconPathNotFocused.png)
                } else if (navigation.state.routeName === 'ThirdPage') {
                    [...]
                }
                return <TabIcon path={icon}/>
            }
        })
    }
)

问题是，当我在第二页屏幕上时，Tabbar仍然可见，但是这些图标都没有" hilightight"，因为没有集中注意力。

问题是我不希望为第二页显示任何特定图标。我希望它像第一页的孩子一样，因此，当我从第一页到第二页时，显示并突出显示了相同的图标(仍然是第一页的图标(。

非常感谢！

Answer 1

您可以将navigationOptions设置为所有屏幕的tabBarIcon

因此，您可以为每个选项卡设置不同的集中精力，而不是专注的图标。

FirstPage : {
    screen: FirstPage,
    navigationOptions: {
        tabBarLabel: "First Page",
        tabBarIcon: ({ tintColor, focused }) => (
            <Image source={focused ? require('iconPathFocused.png') : require('iconPathNotFocused.png')} style={{height: 28, width: 28}}/>
        ),
    }
},
SecondPage : {
    screen: SecondPage,
    navigationOptions: {
        tabBarLabel: "Second Page",
        tabBarIcon: ({ tintColor, focused }) => (
            <Image source={focused ? require('iconPathFocused.png') : require('iconPathNotFocused.png')} style={{height: 28, width: 28}}/>
        ),
    }
},

Answer 2

将其添加到bellow defaultNavigationOptions

 tabBarOptions: {
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }

这可能会有所帮助。有关更多详细信息，请从React-Navigation官方页面中提供帮助：https：//reactnavigation.org/docs/en/tab-lase-navigation.html

检查那里可能会有所帮助的自定义外观。