Как получить уникальный значок для двух экранов с реагирующей навигацией

Question

У меня есть навигатор с нижней вкладкой в ​​реагировать на родной, и я вставил свои экраны в него следующим образом:

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}/>
            }
        })
    }
)

Проблема в том, что когда я нахожусь на экране SecondPage, панель вкладок все еще видна, но ни один из значков не "подсвечен", потому что не сфокусирован.

Дело в том, что я не хочу, чтобы какой-либо конкретный значок отображался на второй странице. Я хочу, чтобы он был как дочерний элемент первой страницы, поэтому при переходе от первой страницы ко второй отображается и выделяется тот же значок (все еще таковой у FirstPage).

Большое спасибо!

Answer 1

Добавьте это ниже defaultNavigationOptions

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

это может помочь. Более подробную информацию можно получить на официальной странице React-Navigation: https://reactnavigation.org/docs/en/tab-based-navigation.html

Проверьте настройки внешнего вида, которые могут помочь в дальнейшем.

Answer 2

Вы можете установить 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}}/>
        ),
    }
},