如何将 StackNavigator 与 DrawerNavigator (ReactNavigation v5) 一起使用？我在每个屏幕上使用 类

Question

P.S：网络上的大多数 Youtube 视频或文章都没有使用 ReactNavigation v5，它们使用的是旧版本。 当用户可以单击按钮导航到不同的屏幕（使用 StackNavigator）和 DrawerNavigator 以及在屏幕之间导航时，有人可以显示虚拟项目吗？屏幕必须有一个 class 和一个简单的文本，仅此而已。 谢谢！

Answer 1

您可以像这样进行基本设置，其中包含主页、个人资料和通知屏幕。 主页和个人资料在一个堆栈下，通知是一个单独的屏幕。堆栈和通知都放在抽屉导航下。

这里我使用了 class 组件，因为那是你的要求，但功能组件是首选，因为 Navigation5 提供了像 useNavigation 这样的挂钩，但也有使用这些组件的变通方法。

您可以看到下面的代码。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Notifications')}
          title="Go to notifications"
        />

        <Button
          onPress={() => this.props.navigation.navigate('Profile')}
          title="Go to Profile"
        />
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Notifications')}
          title="Go to notifications"
        />
      </View>
    );
  }
}

class NotificationsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Notifications Screen</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Go back home"
        />
      </View>
    );
  }
}

const Stack = createStackNavigator();
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

const Drawer = createDrawerNavigator();
export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeStack} />
          <Drawer.Screen name="Notifications" component={NotificationsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

您也可以尝试下面小吃中的代码。 https://snack.expo.io/@guruparan/navsample