如何在我的TabNavigator上方渲染来自react-native-gesture-handler的DrawerLayout?

huangapple go评论56阅读模式
英文:

How can I render DrawerLayout from react-native-gesture-handler on top of my TabNavigator?

问题

App 使用 react-navigation 6

App 有一个 TabNavigator,我需要一个 Drawer,在 TabNavigator 之上呈现,其中有可以选择的项目,并根据选择的项目更改相同 TabNavigator 中的选项卡中的屏幕。

DrawerNavigator 的解决方案不符合我的需求。因为当用户从 TabNavigator 选择另一个选项卡时,我应该更改另一个选项卡的 Drawer 内容,并在某些选项卡上 锁定 DrawerLayout。

我尝试使用带有自定义布局的 DrawerNavigator 来执行相同的操作,但是我无法获取 DrawerNavigator 中的当前 routeName 以根据选项卡更改内容,我可以使用 TabPress 侦听器,但是如何从 TabNavigator 更新 DrawerNavigator 路由呢?

我正在使用 DrawerLayout 来设置我的 React Native 应用程序的抽屉。当用户按下 Item 时,我只是将 TabNavigator 包装在 DrawerLayout 中,像这样(伪代码):

const TabNavigator = ({ route, navigation }) => {

    return (
      <DrawerLayout route={route} navigation={navigation}>
        <Tab.Navigator>
          <Tab.Screen>
          ...其余的选项卡
        </Tab.Navigator>
      </DrawerLayout>
    )
}

当用户按下 Item 时,我像这样在 DrawerLayout 中导航到另一个屏幕:

const onPressItem = () => {
   // 如果项目未选择,则导航到相同选项卡中的新屏幕
   if (TabSelectedItem !== 'New_Screen_In_The_Same_Tab') {
       navigation.replace('New_Screen_In_The_Same_Tab')
       navigation.setParams({
        TabSelectedItem: 'New_Screen_In_The_Same_Tab',
       })
   }
   // 如果选项卡已选择,则关闭抽屉
   closeDrawer()
}

所以基本上一切都正常工作,除了一件事,我注意到如果我只关闭 DrawerLayout,一切都很好,但当我导航到新屏幕时,我感觉 DrawerLayout 有点卡顿,我认为这可能是因为我进行导航,而所有 TabNavigator 都会重新渲染。

问题是:
我能修复它吗,还是最好使用其他解决方案来处理这种特殊情况?

英文:

App using react-navigation 6

App have TabNavigator and I need to have Drawer that rendered on top of TabNavigator that render Items, that could be selected, and based on what Item was selected I need to change screen in the same Tab in TabNavigator.

The DrawerNavigator solution doesn't fit my needs. Because when user select another Tab from TabNavigator I should change Drawer content for another Tab and lock DrawerLayout on some Tabs

I tried to do the same with DrawerNavigator with CustomLayout but I can't get current routeName in DrawerNavigator to change content based on Tab, I could use TabPress listener but then how I could update DrawerNavigator route from TabNavigator?

I am using DrawerLayout to set up Drawer for my react-native app. And I just wrap TabNavigator with DrawerLayout like that(pseudo code):

const TabNavigator = ({ route, navigation }) =&gt; {

    return (
      &lt;DrawerLayout route={route} navigation={navigation}&gt;
        &lt;Tab.Navigator&gt;
          &lt;Tab.Screen&gt;
          ...rest of tabs
        &lt;/Tab.Navigator&gt;
      &lt;/DrawerLayout&gt;
    )
} 

And I am navigation to another screen in DrawerLayout like this when user press on Item:

const onPressItem = () =&gt; {
   // if Item is not selected then navigate to new screen in the same tab
   if(TabSelectedItem !== &#39;New_Screen_In_The_Same_Tab&#39;) {
       navigation.replace(&#39;New_Screen_In_The_Same_Tab&#39;)
       navigation.setParams({
        TabSelectedItem: &#39;New_Screen_In_The_Same_Tab&#39;,
       })
   }
   // if tab was already selected close the drawer
   closeDrawer()
}

So basically everything works except one thing, I noticed that if I just close DrawerLayout everythings is fine, but when I am navigating to new screen I feel like DrawerLayout is lagging, I suppose it could be because I do navigation and all TabNavigator do re-render

Question is:
Could I fix it, or better to use any another solutions for this specific case?

答案1

得分: 1

现在我正在使用react-native-drawer-layout中的Drawer

我仍然将Drawer包装在Tab.Navigator周围,但使用这个Drawer,动画非常流畅。在使用DrawerLayout时,存在一个问题,当我在DrawerLayout内导航到另一个屏幕时,动画会有点故障。而使用Drawer一切正常。它的工作方式与react-navigation中的Drawer.Navigator相同。

为了在某些选项卡上锁定Drawer,我使用了react-navigation中的getFocusedRouteNameFromRoute。在Drawer内部,我会检查currentRoute == selectedTabStack,我将swipeEnabled={true}传递给Drawer,以便能够使用滑动手势打开Drawer,而且只有在那些应该打开Drawer的选项卡上才有open-drawer-button(通过屏幕参数headerLeft进行配置)。

此外,使用getFocusedRouteNameFromRoute,我会根据focusedRoute更改Drawer内容(在我的情况下,这将是焦点选项卡)。

希望这对某人有所帮助 如何在我的TabNavigator上方渲染来自react-native-gesture-handler的DrawerLayout?

英文:

Okay so I figured out how to do this

Now I am using Drawer from react-native-drawer-layout

I still wrap the Drawer around Tab.Navigator, but with this Drawer animations is smooth, in the case of DrawerLayout there is an issue with native animations, and when I do navigate to another screen inside DrawerLayout animation is a little bit glitchy, with Drawer everything is okay. It works in the same way as Drawer.Navigator from react-navigation

And to lock Drawer on some tabs I am using getFocusedRouteNameFromRoute from react-navigation. And inside Drawer I am checking if currentRoute == selectedTabStack
I pass swipeEnabled={true} to Drawer to be able to open Drawer with swipe gesture, and I have open-drawer-button only on those tabs where Drawer should be opened(configured via screen param headerLeft)

Also using getFocusedRouteNameFromRoute I change Drawer content based on focusedRoute(it would be the focused tab in my case)

Hope it will help someone 如何在我的TabNavigator上方渲染来自react-native-gesture-handler的DrawerLayout?

huangapple
  • 本文由 发表于 2023年2月20日 00:40:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/75501698.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定