获取react导航中tab导航器的当前活动屏幕路由

Question

这是我使用 react navigation v3.2.1 的导航堆栈：

1. 我有一个切换导航器可以切换到身份验证导航堆栈和经过身份验证的应用程序堆栈。

2. 应用程序堆栈是使用底部选项卡导航器制作的。

3. 我想为选项卡导航器使用自定义组件。

使用createBottomTabNavigator自定义tabBarComponent.

例如：

1. 假设标签导航堆栈有 2 个导航屏幕，即主页和聊天。
2. 在自定义 BottomBar 中，如何检查焦点/活动/当前路由名称是否为 Home/Chat，以便我可以分别更改图标的样式？

应用容器.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

底部栏.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>
        )
    }
}

图标组件.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

自定义 BottomBar 的导航对象有一个索引，用于保存当前活动屏幕索引

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

navigation.state.index

如果主屏幕处于活动状态 >> navigation.state.index 将为 0 如果聊天屏幕处于活动状态 >> navigation.state.index 将为 1 ...等

Answer 2

在 React Navigation 5.x 中使用功能组件。您可以使用useIsFocused挂钩。

import { useIsFocused } from "@react-navigation/native"; 

用法：在您想要检测的每个选项卡屏幕中，它们是否当前处于活动状态或焦点状态。

const isFocused = useIsFocused();

if (isFocused) {
  // the screen is currently focused
  // your code here
}

文档： https: //reactnavigation.org/docs/function-after-focusing-screen/