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

Question

使用的包：

1. "@react-navigation/drawer": "^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>
  );
}

主屏幕.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>
    );
}

条款Condition.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>
    );
  }

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

Answer 1

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

应用程序.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 的所有代码都是一样的。

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