帶有標題后退按鈕的 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 。