Получить текущий активный экран маршрута вкладки навигатора в реагирующей навигации

Question

Это мой стек навигации, использующий реагирующую навигацию v3.2.1 :

1. У меня есть переключатель навигатора для переключения на стек навигации Authentication и Authenticated App stack.

2. Стек приложений создается с помощью навигатора нижней вкладки.

3. Я хотел бы использовать пользовательский компонент для навигатора вкладок.

Как получить текущее имя маршрута навигатора вкладок при использовании createBottomTabNavigator и пользовательского tabBarComponent.

Например:

1. Предположимстек навигации по вкладкам имеет 2 экрана навигации, т. е. «Дом» и «Чат».
2. Внутри пользовательского BottomBar, как проверить, является ли имя фокусированного / активного / текущего маршрута Home / Chat, чтобы я мог изменить стильзначки соответственно?

AppContainer.js

const switchStack = createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack
}, {
    initialRouteName: 'AuthLoading',
})

export default createAppContainer(switchStack)

AppStack.js

const AppStack = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
    },
    Chat: {
        screen: ChatStack
    },
}, {
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    shifting: false,
    barStyle: {
        backgroundColor: '#694fad',
    },
    labeled: false,
    tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>
})

export default AppStack

BottomBar.js

export default class BottomBar extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>
                <IconComponent routeName={'Home'}/>
                <IconComponent routeName={'Chat'}/>
            </View>
        )
    }
}

IconComponent.JS

export default class IconComponent extends React.Component {
    constructor(props) {
        super(props)
    }

    ...

    render() {
        let IconComponent
        let iconName
        let iconSize = 25
        switch (this.props.routeName) {
            case 'Home':
                IconComponent = MaterialCommunityIcons
                // iconName = `home${focused ? '' : '-outline'}`;
                iconName = `home`;
                break
            case 'Chat':
                IconComponent = AntDesign
                iconName = `message1`
                iconSize = 22
                break
        }

        let tintColor = 'green'

        // if focused Home is current tab screen then change style eg. tint color.
        // similary if current tab screen is Chat, then change style.

        return (
                <Animated.View
                    style={[
                        styles.container,
                        {
                            opacity: this.opacity
                        }
                    ]}
                >
                    <IconComponent name={iconName} size={iconSize} color={tintColor}/>
                </Animated.View>
        )
    }
}

Answer 1

Вместо установки полностью нового tabBarComponent для значков вы можете использовать свойство tabBarIcon для установки значков. Вы можете найти пример на Документациях по вкладкам

• tabBarIcon является свойством navigationOptions, поэтому мы знаем, что можем использовать его на наших компонентах экрана, но в этом случае решили поставить его в конфигурации createBottomTabNavigator для централизации значок конфигурации для удобства.
• tabBarIcon - это функция, для которой задан параметр focused state, tintColor и horizontal, который является логическим значением. Если вы берете загляните дальше в конфигурации, которую вы увидите tabBarOptions и activeTintColor и inactiveTintColor. Эти по умолчанию платформа iOS по умолчанию, но вы можете изменить их здесь. tintColor, который передается на tabBarIcon, является либо активный или неактивный, в зависимости от состояния focused активный). Состояние ориентации horizontal истинно, когда устройство в альбомной ориентации - false для портрета.
• Прочитайте полную справочную информацию по API для получения дополнительной информации о createBottomTabNavigator опциях конфигурации.

Пример (из документов)

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          // Sometimes we want to add badges to some icons. 
          // You can check the implementation below.
          IconComponent = HomeIconWithBadge; 
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

Answer 2

Вы можете с navigation.state.routeName

tabBarComponent: ({navigation}) => <BottomBar navigation={navigation} currentRouteName={navigation.state.routeName} />

Или, что еще лучше, вы можете сделать что-то вроде этого:

const TabNavigator = createBottomTabNavigator({
    Home: Home,
    Chat: Chat
},
{
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
            if (navigation.state.routeName === 'Home') {
                return <Icon name='ios-home' size={30} color={tintColor} />
            } else if (navigation.state.routeName === 'Chat') {
                return <Icon name='ios-heart' size={30} color={tintColor} />
            }
        },
        tabBarOptions: {
            activeTintColor: '#2BEDBA',
            inactiveTintColor: '#FAFAFA',
            style: { backgroundColor: '#000', paddingTop: 5 }
        },
    })
});

Answer 3

Навигационный объект вашего пользовательского BottomBar имеет индекс, который содержит текущий активный индекс экрана

tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>

navigation.state.index

Если домашний экран активен >> navigation.state.index будет 0, если экран чата активен >>navigation.state.index будет 1 ... и т. д.