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

我还使用了自定义抽屉内容组件，因此在使用创建另一个堆栈导航器的方法后，抽屉中的链接仍然可以正常工作。您可以在this answer的文档中阅读有关提供自定义抽屉组件的更多信息。

为了简化示例，我省略了一些代码，并将authenticated设置为硬编码值。另外，请确保从DrawerItem 导入DrawerContentScrollView，@react-navigation/drawer。

反应带标题后退按钮的导航抽屉导航器

1 个答案: