如何在选项卡导航器中获取当前焦点屏幕？答案

【问题标题】：How to get the current focused screen in tab navigator?如何在选项卡导航器中获取当前焦点屏幕？
【发布时间】：2022-01-06 05:34:01
【问题描述】：

我有一个标签导航器，它有两个屏幕，第一个它只是一个屏幕组件，第二个它是一个有两个屏幕的堆栈导航器，所以当我滑动时，我会到达堆栈导航器的第一个屏幕，现在的问题是，当我滑回第一个屏幕时，我需要知道当前焦点屏幕是选项卡的第一个还是堆栈的第一个，使用导航我只获取堆栈导航器的屏幕而不是从标签导航器，有什么方法可以知道吗？

这是代码，这是标签导航器：

 return (
    <>
        <Tab.Navigator 
            tabBar = {() => null}
            tabBarPosition = "bottom"
            sceneContainerStyle = {{style: {marginTop: StatusBar.currentHeight}}}
            screenOptions = {{
                swipeEnabled: swipe,
                //unmountOnBlur: true
            }}
        >
            <Tab.Screen name = "VisionList" component = {VisionListScreen}/>
            <Tab.Screen name = "Sound" component = {Routes} screenOptions = {{gestureEnabled: false}}/>
          </Tab.Navigator>
        {
            (show && song) ?
            <BottomSheet show = {show} info = {song}></BottomSheet> : null
        }
    </>
)

这里是堆栈导航器，即选项卡导航器中的路由组件：

  <Stack.Navigator theme = {MyTheme} screenOptions={{headerShown: false, transparentCard:true}}>
        <Stack.Screen 
            options = {() => ({
                gestureEnabled: false,
                transitionSpec: {
                    open: {
                        animation: "timing", config: {duration: 1100}
                    },
                    close: {
                        animation: "timing", config: {duration: 1000}
                    }
                },
                cardStyleInterpolator: ({current: {progress}}) => {
                    return {
                        cardStyle: {
                            opacity: progress,
                        }
                        
                    }
                }
            })}
            name = "HomeDrawer" 
            component = {Home}
        > 
        </Stack.Screen>
        <Stack.Screen 
            options = {() => ({
                gestureEnabled: false,
                transitionSpec: {
                    open: {
                        animation: "timing", config: {duration: 1100}
                    },
                    close: {
                        animation: "timing", config: {duration: 1000}
                    }
                },
                cardStyleInterpolator: ({current: {progress}}) => {
                    return {
                        cardStyle: {
                            opacity: progress,
                        }
                        
                    }
                }
            })}
            name = "ArtistSection" 
            component = {ArtistSection}
        >
        </Stack.Screen>
    </Stack.Navigator>

当我在 HomeDrawer 屏幕中模糊时，我需要知道我是否在选项卡导航器的 VisionList 中，但我不能，谢谢 :)

【问题讨论】：

标签： javascript reactjs react-native navigation

【解决方案1】：

你可以试试这个：https://snack.expo.dev/@amitdutta121/react-navigation-get-focused-screen

你可以通过 useRoute() 钩子获取当前关注的路由，看这个：https://reactnavigation.org/docs/use-route/

在小吃中，我创建了一个您可以结帐的示例。

【讨论】：