如何在 react-navigation-drawer Drawer 组件中获取当前的路由名称? [英] how to get current routeName in react-navigation-drawer Drawer compoenent?

问题描述

我已经使用这些库创建了我的 App Navigator 组件

I have created my App Navigator component with these libraries

1. 反应导航
2. 反应导航堆栈
3. 反应导航抽屉抽屉嵌套在主堆栈内.

抽屉堆

const DrawerMenu = createDrawerNavigator(
  {
    Home: {
      screen: Home
    },
    MyAccount: {
      screen: MyAccount
    }
  },
  {
    overlayColor: "rgba(0, 0, 0, 0.7)",
    gestureEnabled: false,
    initialRouteName: "Home",
    contentComponent: Drawer,
    drawerWidth: styles.drawerWidth
  }
);

const DrawerAppContainer = createAppContainer(DrawerMenu);

主应用容器或根

const routes = {
  //independent screens
  Language: {
    screen: Language,
  },
  Welcome: {
    screen: Welcome,
  },
 DetailScreen: {
    screen: DetailScreen,
  },
  Dashboard: {
    screen: DrawerAppContainer,
  },
  Login: {
    screen: Login,
  },
const routeConfig = {
  initialRouteName: "Home",
  headerMode: "none",
  navigationOption: {
    gestureEnabled: false,
  },
};

const AppNavigator = createStackNavigator(routes, routeConfig);

export default createAppContainer(AppNavigator);

在我的项目中，我想要抽屉组件中的当前渲染屏幕名称，以便我可以相应地设置路由名称的样式(如颜色、粗体).

In my project, I want the current rendering screen name in the drawer component so I can style route name accordingly(like color, bold fonts).

我尝试使用道具(this.props.navigation.state.routeName)获取路线名称，但它始终显示仪表板.

I tried getting route name with props (this.props.navigation.state.routeName), but its always showing Dashboard.

我如何获得像 Home 或 MyAccount 这样的嵌套 routeName?

How do I get nested routeName like Home or MyAccount?

推荐答案

这是我使用 React 导航抽屉组件的第 5 版使其工作的方式.

This is the way I made it work using version 5 of the react navigation drawer component.

在这个例子中，我正在创建一些屏幕，但我想隐藏其中的一些.

In this example I am creating some screens but I want to hide some of them.

首先创建导航容器.

 <NavigationContainer>
      {
        <Drawer.Navigator
          initialRouteName='Home'
          drawerContent={(props) => <DrawerContent {...props} />}
        >
          <Drawer.Screen name='Home' component={HomeScreen} />
          <Drawer.Screen
            name='RawMaterial'
            component={RawMaterial}
            options={{ drawerLabel: 'Materia Prima' }}
          />
          <Drawer.Screen
            name='RawMaterialAdd'
            component={RawMaterialAdd}
            options={{ drawerLabel: '' }}
          />
          <Drawer.Screen
            name='RawMaterialEdit'
            component={RawMaterialEdit}
            options={{ drawerLabel: '' }}
          />
        </Drawer.Navigator>
      }
    </NavigationContainer>

然后您将需要创建一个自定义抽屉，以 DrawerContent 为例.

Then you will need to created a custom drawer, for the sake of the example is DrawerContent.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';

import { Icon } from 'native-base';
export function DrawerContent(props) {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View>
          <DrawerItem
            icon={({ color, size }) => <Icon type='AntDesign' name='home' />}
            label='Home'
            focused={getActiveRouteState(
              props.state.routes,
              props.state.index,
              'Home'
            )}
            onPress={() => {
              props.navigation.navigate('Home');
            }}
          />
          <DrawerItem
            icon={({ color, size }) => (
              <Icon type='AntDesign' name='shoppingcart' />
            )}
            focused={getActiveRouteState(
              props.state.routes,
              props.state.index,
              'RawMaterial'
            )}
            label='Materia Prima'
            onPress={() => {
              props.navigation.navigate('RawMaterial');
            }}
          />
        </View>
      </DrawerContentScrollView>
    </View>
  );
}

const getActiveRouteState = function (routes, index, name) {
  return routes[index].name.toLowerCase().indexOf(name.toLowerCase()) >= 0;
};

这篇关于如何在 react-navigation-drawer Drawer 组件中获取当前的路由名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！