如何在嵌套 Tab.Navigator 中查找当前 screen/route

Question

我有一个用于 Tab.Navigator 的自定义 TabBar，当根据该选项卡的 Stack Navigator 组件中的当前路由选择其中一个选项卡时，它需要执行不同的操作。

如何查看此自定义 TabBar 中当前显示的 Stack.Screen？尝试使用 getRoute 挂钩只会向我显示承载 Tab.Navigator.

的父屏幕

<Tab.Navigator tabBar={(props) => <BottomTabBar {...props} />}>
      <Tab.Screen
        name="Home"
        component={HomeStack}
        initialParams={{showSuccess: route.params?.showSuccess}}
      />
      <Tab.Screen name="Alternate" component={AlternateScreen} />
    </Tab.Navigator>

我无法在使用 tabBarOptions 时传递值，因为我不知道创建标签栏时选择的路由是什么。

Answer 1

我最终在导航器范围之外跟踪当前屏幕，因为内置的 Tab Navigator 没有像我希望的那样在 Stack Navigator 中保留对嵌套屏幕的引用。

只需要确定两个屏幕之间的差异，我的粗略技巧是在上下文挂钩中获取当前屏幕引用，并在安装相关屏幕时在 useEffect 挂钩中更新该值。

无论您的提供者是什么，都有一个像这样的 currentScreen 常量：

const currentScreen = useRef('Closet');

然后，在您的屏幕中，从 useContext 挂钩中的提供程序中解构该值：

const { currentScreen } = useContext(MyContext);

然后，在同一屏幕中更新 useEffect 挂钩中的 currentScreen 值：

useEffect(() => {
    currentScreen.current = 'NewScreen';
}, []);

如何在嵌套 Tab.Navigator 中查找当前 screen/route

How to find current screen/route in nested Tab.Navigator

reactjs

react-native

react-native-navigation

react-navigation-bottom-tab