如何在react-native中组合使用Drawer Navigator和Stack Navigator？

Question

使用的套餐：

1. “@react-navigation/抽屉”：“^6.1.8”，
2. “@react-navigation/native”：“^6.0.6”，
3. “@react-navigation/stack”：“^6.0.11”，

问题：

图像1,2和3：我已经实现了抽屉，其中显示两个选项作为主页和条款和条件。如果您单击 t&c 选项，它将打开其屏幕，如果您单击主屏幕，它会返回到主页屏幕。

图像 1 和 4： 我已将“单击查看详细信息页面”文本设置为可在主屏幕上单击，单击后应该转到详细信息屏幕，但会抛出错误，如图 4 所示，我对如何实现它感到困惑。我在哪里编写 Stack.Navigation 代码。

应用程序.js

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';


const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="HomeScreen">
        <Drawer.Screen name="HomeScreen" component={HomeScreen} />
        <Drawer.Screen name="Term&Condition" component={TermsCondition} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js

export default function HomeScreen({ navigation }) {
    return (
        <TouchableOpacity onPress={() => navigation.navigate('DetailPage')}>
            <View style={{ flexDirection: 'row' }}>
                <Text style={{ fontSize: 50 }}>Click for Details Page</Text>
            </View>
        </TouchableOpacity>
    );
}

TermsCondition.js

function TermsCondition({ navigation}) {
    return (
      <View style={{ flexDirection: 'row' }}>
        <Text style={{fontSize:50}}>T&C Page</Text>
      </View>
    );
  }
  export default TermsCondition;

详细页面.js

function DetailPage({ navigation}) {
    return (
      <View style={{ flexDirection: 'row' }}>
        <Text style={{fontSize:50}}>DetailPage</Text>
      </View>
    );
  }

导出默认详情页； 很抱歉这个愚蠢的问题，但我在网上尝试过，但很困惑。 预先感谢您！

Answer 1

这是嵌套导航的简单步骤 这是相同的解决方案：

App.js

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';
import { createStackNavigator } from '@react-navigation/stack';



const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

{/* Add Drawer.Navigation to a function.*/}
function Root() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="HomeScreen" component={HomeScreen} />
      <Drawer.Screen name="Term&Condition" component={TermsCondition} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen options={{
        }} name="Root" component={Root} {/*Call function as Stack.Screen*/}
        options={{ headerShown: false }} /> {/*This will disable function header*/}
        <Stack.Screen options={{
          title: 'DetailPage'
        }} name="DetailPage" component={DetailPage} />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

注意： 其余 DetailPage.js、HomeScreen.js、TermCondition.js 的所有代码都是相同的。

诗。从错误中休息一下，然后以全新的心态回来。这可能会解决它:-)

Answer 2

如果您使用Expo路由器进行导航（推荐的操作方式）

以下是如何使用 Expo 路由器创建抽屉 + 堆栈导航器。

注意：Expo-router 还在底层使用了 react-navigation。

第 1 步。 使用抽屉导航创建 app/_layout.tsx 文件。

import React from "react";
import Drawer from "expo-router/drawer";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const RootLayout = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer screenOptions={{ headerShown: false }}>
        <Drawer.Screen name="(stacks)" />
      </Drawer>
    </GestureHandlerRootView>
  );
};

export default RootLayout;

注意：请勿在 /app 内创建索引文件。该文件不是必需的，因为我们直接想要将堆栈布局（如步骤 2 中所示）渲染到主布局上。

第 2 步。 创建一个要在其中进行堆栈导航的文件夹。例如，应用程序/（堆栈）。将其视为应用程序的主导航文件夹。

文件 -

app/(stacks)/_layout.tsx

import React from "react";
import { Stack, useNavigation } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { DrawerActions } from "@react-navigation/native";

const StacksLayout = () => {
  const nav = useNavigation();
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerTitle: "Stack Home",
          headerLeft: () => {
            return (
              <Ionicons
                name="menu"
                size={24}
                onPress={() => {
                  nav.dispatch(DrawerActions.openDrawer());
                }}
              />
            );
          },
        }}
      />
    </Stack>
  );
};

export default StacksLayout;

注意： 这里我们添加了打开抽屉和隐藏主抽屉屏幕的功能。

步骤 3. 添加索引文件。

app/(stacks)/index.tsx

import { View, Text } from "react-native";
import React from "react";
import { useRouter } from "expo-router";

const StackHome = () => {
  const router = useRouter();
  return (
    <View>
      <Text>Stack Home</Text>
      <Text
        onPress={() => {
          router.push("/(stacks)/users");
        }}
      >
        Go to users page
      </Text>
    </View>
  );
};

export default StackHome;

第4步。在内部（堆栈）创建一个用户文件。文件 - app/(stacks)/users.tsx

import { View, Text } from "react-native";
import React from "react";

const StackUsers = () => {
  return (
    <View>
      <Text>Users Screen</Text>
    </View>
  );
};

export default StackUsers;