React Native 如何禁用/隐藏特定子嵌套屏幕内的抽屉?

fzsnzjdm  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(128)

我有一个React Native应用程序导航逻辑,类似于这个navigation structure(抽屉、标签、堆栈)。
抽屉导航器包含底部标签导航器,底部标签导航器包含堆栈导航器。
当我在某个嵌套最深的组件上时,我想禁用我的左抽屉(完全停用其标题)。

Level 0
const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigation />
    </NavigationContainer>
  );
};

Level -1
const DrawerNavigation = (props: Props) => {
  const Drawer = createDrawerNavigator();

  return (
    <Drawer.Navigator
      useLegacyImplementation
      initialRouteName="GlobalTabNavigation"
    >
      <Drawer.Screen
        name="GlobalTabNavigation"
        component={BottomTabNavigation}
      />
    </Drawer.Navigator>
  );
};

Level -2
const BottomTabNavigation = () => {
  const Tab = createMaterialTopTabNavigator();
  return (
    <Tab.Navigator
      initialRouteName="HomeStack"
      tabBarPosition="bottom"
      backBehavior="initialRoute"
    >
      <Tab.Screen
        name="HomeStack"
        component={HomeStackScreen}
      />
      <Tab.Screen
        name="DownloadsStack"
        component={DownloadsStackScreen}
      />
      <Tab.Screen
        name="Wipe"
        component={WipeScreen}
      />
    </Tab.Navigator>
  );
};

Level -3
const HomeStackScreen = () => {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeComponent} />
      <Stack.Screen name="RlsACOptions" component={RlsACOptionsComponent} />
    </Stack.Navigator>
  );
};

Level -4
const RlsACOptionsComponent = () => {
  return (
     // My Stuffs
  );
};

字符串
现在,在我的子级别-4组件RlsACOptionsComponent中,我想停用我的级别-1 Drawer标题。
如何让我的抽屉检测到这种深度的路线?
祝你好运
我知道getFocusedRouteNameFromRoute可以向下1级,但是向下2级、3级、4级呢?
我用的是React Navigation v6 x。

acruukt9

acruukt91#

使用onStateChange监听导航状态的变化,并更新应用程序状态以隐藏/显示组件。类似这样:

const [showHeader, setShowHeader] = useState(true);

const getCurrentRoute = (state) => {
  if (state.routes[state.index].state != undefined) {
    return getCurrentRoute(state.routes[state.index].state);
  } else {
    return state.routes[state.index];
  }
}

return (
  <NavigationContainer
    onStateChange={(state) =>
      setShowHeader(!['RlsACOptions'].includes(getCurrentRoute(state).name))
    }>
    <Drawer.Navigator
      screenOptions={{ headerShown: showHeader }}>
...
    </Drawer.Navigator>
  </NavigationContainer>
);

字符串

相关问题