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

Posted 2023-05-07

【中文标题】如何在 react-native 中结合使用 Drawer Navigation 和 Stack Navigator？

【英文标题】：How to use Drawer Navigator & Stack Navigator combined in react-native?

【发布时间】：2021-12-26 15:45:21

【问题描述】：

使用的包：

"@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11",

问题：

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

图片 1 和 4： 我在 HomeScreen 上将“点击查看详细信息页面”文本设置为可点击，点击后应该会转到详细信息屏幕，但会引发错误，如图 4 我对如何操作感到困惑实施它。我在哪里编写 Stack.Navigation 代码。

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';


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;

DetailPage.js

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

导出默认的DetailPage； 对不起这个愚蠢的问题，但我在网上试过但很困惑。 提前谢谢你！

【问题讨论】：

尝试使用嵌套导航器方法：阅读此-'reactnavigation.org/docs/nesting-navigators/…'

“DetailPage”在哪里？在您发布的代码中没有带有“DetailPage”名称的页面

这只是一个普通的代码，所以没有包含它，而是添加了它。

@JohnOcean 我试试看

可以完全分享 App.js 吗？

【参考方案1】：

是Nested Navigation的简单的步骤 这是相同的解决方案：

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 的所有代码都是一样的。

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