如何在反应导航抽屉中获取当前路由名称 抽屉组成?

Question

我使用这些库创建了我的应用程序导航器组件

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);

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

我尝试使用props(this.props.navigation.state.routeName(获取路由名称，但它总是显示仪表板。

如何获得嵌套的路由名称，如主页或我的帐户？

Answer 1

这是我使用 react 导航抽屉组件版本 5 使其工作的方式。

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

首先创建导航容器。

 <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>

然后，您将需要创建一个自定义抽屉，例如抽屉内容。

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;
};

Answer 2

您需要在 DrawerNavigator 中使用 contentComponent。

View style={[styles.screenStyle, (this.props.activeItemKey=='ScreenC') ? styles.activeBackgroundColor : null]}>
                    <Text style={[styles.screenTextStyle, (this.props.activeItemKey=='ScreenC') ? styles.selectedTextStyle : null]} onPress={this.navigateToScreen('ScreenC')}>Screen C</Text>
                </View>