React Native 如何在嵌套的Tab.Navigator中查找当前屏幕/路线

cgvd09ve  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(168)

我有一个自定义的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传递值,因为我不知道创建选项卡栏时所选的路由是什么。

du7egjpx

du7egjpx1#

我最终在导航器的范围之外跟踪当前屏幕,因为内置的标签导航器没有像我希望的那样在堆栈导航器中保持对嵌套屏幕的引用。
只需要确定两个屏幕之间的差异,我的粗糙技巧是在上下文挂钩中设置当前屏幕引用,并在相关屏幕被挂载时在useEffect挂钩中更新该值。
无论你的提供程序是什么,都有一个currentScreen常量,如下所示:

const currentScreen = useRef('Closet');

然后,在屏幕中,从useContext钩子中的provider中解构该值:

const { currentScreen } = useContext(MyContext);

然后,在同一屏幕中更新useEffect钩子中的currentScreen值:

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

wpx232ag2#

我刚刚在ReactNavigation v6+中解决了这个问题
我用途:

const Tab = createMaterialTopTabNavigator();

然后:

<Tab.Navigator 
   initialRouteName={'Tab-All'}
   screenOptions={screenOptions}
   screenListeners={{state: (e) => { currentTabIndex.current = e.data.state.index }}}
   initialLayout={{width, height}}
>
... // your screens go here
</Tab.Navigator>

CurrentTabIndex只是由useRef创建的变量,正如您可能会想到的,Tab.Navigator继承了一些Navigator属性。

相关问题