javascript - 带有标题后退按钮的 React 抽屉导航导航器

Question

我正在使用 React Navigation v5 的抽屉式导航。在我的根文件中，我创建了抽屉导航器。此导航器内的某些屏幕具有嵌套的堆栈导航器。第一项是仪表板，第二项是关系。

问题是当我转到关系时，我没有得到用于转到第一个屏幕(仪表板)的后退按钮。是否可以将其添加到我的关系屏幕？

根代码:

<NavigationContainer>
  <DrawerNavigator.Navigator
    drawerContent={(props) => (
      <SidebarComponent {...props} user={this.props.device.user} />
    )}
    drawerPosition="right"
    drawerStyle={{width: '90%', padding: 0, backgroundColor: 'red'}}>
    {this.props.authenticated && this.props.device.api_key ? (
      <>
        <DrawerNavigator.Screen
          name="Home"
          options={{
            headerShown: false,
            icon: 'tachometer-alt',
            category: 'dashboard',
          }}
          component={DashboardStack}
        />
        <DrawerNavigator.Screen
          name="Relations"
          options={{
            icon: 'address-book',
            category: 'dashboard',
          }}
          component={RelationsStack}
        />
      </>
    ) : (
      <>
        <DrawerNavigator.Screen
          name="login"
          options={{headerShown: false, gestureEnabled: false}}
          component={LoginStack}
        />
      </>
    )}
  </DrawerNavigator.Navigator>
</NavigationContainer>

关系栈代码:

import 'react-native-gesture-handler';
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import RelationsListScreen from '../RelationsListScreen';
import {colors} from '../../../assets/styles/variables';

const Stack = createStackNavigator();

function RelationsStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{
          headerShown: true,
          headerTintColor: '#FFF',
          headerStyle: {
            backgroundColor: colors.primary,
            shadowColor: 'transparent',
          },
        }}
        name="Relations"
        component={RelationsListScreen}
      />
    </Stack.Navigator>
  );
}

export default RelationsStack;

Answer 1

您可以创建一个堆栈导航器，它是您的抽屉导航器的屏幕(当用户通过身份验证时)，它具有 Home 和 Relations 作为屏幕。我在下面的示例中将此导航器称为 AuthenticatedNavigator:

const AuthenticatedStack = createStackNavigator();
// ...

const AuthenticatedNavigator = () => {
  return (
    <AuthenticatedStack.Navigator screenOptions={{headerShown: false}}>
      <AuthenticatedStack.Screen
        name="Home"
        options={{
          icon: 'tachometer-alt',
          category: 'dashboard',
        }}
        component={DashboardStack}
      />
      <AuthenticatedStack.Screen
        name="Relations"
        options={{
          icon: 'address-book',
          category: 'dashboard',
        }}
        component={RelationsStack}
      />
    </AuthenticatedStack.Navigator>
  );
};

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      <DrawerItem
        label="Relations"
        onPress={() => props.navigation.navigate('Relations')}
      />
    </DrawerContentScrollView>
  );
}

function App() {
  const authenticated = true;
  return (
    <NavigationContainer>
      <DrawerNavigator.Navigator
        drawerPosition="right"
        drawerStyle={{width: '90%', padding: 0, backgroundColor: 'red'}}
        drawerContent={(props) => <CustomDrawerContent {...props} />}>
        {authenticated ? (
          <DrawerNavigator.Screen
            name="authenticated"
            component={AuthenticatedNavigator}
          />
        ) : (
          <DrawerNavigator.Screen
            name="login"
            options={{headerShown: false, gestureEnabled: false}}
            component={LoginStack}
          />
        )}
      </DrawerNavigator.Navigator>
    </NavigationContainer>
  );
}

我还使用了自定义抽屉内容组件，因此抽屉中的链接在使用创建另一个堆栈导航器的方法后仍然可以正常工作。您可以在此处的文档中阅读有关提供自定义抽屉组件的更多信息:https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent .

---

我省略了一些代码并将 authenticated 设为硬编码值以简化示例。还要确保从 @react-navigation/drawer 导入 DrawerItem、DrawerContentScrollView。