时间戳

首页 > 解决方案 > 反应原生嵌套导航问题

javascript - 反应原生嵌套导航问题

问题描述

我将堆栈导航器保存在抽屉导航器上。

我有2个问题。

  1. 打开应用程序时，菜单不应出现在页面上。
  2. 我在注册时使用的组件名称不应该出现在我稍后引导的页面上。

我无法解决这个问题。你能帮助我吗？

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function Menu() {
    return (
        <Stack.Navigator headerMode="none" lazy={false}>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Verify" component={VerifyScreen} />
            <Stack.Screen name="Tarih" component={Datepicker} options={{
                animationEnabled: false,
            }} />
            <Stack.Screen name="Otel" component={SearchedHotel} options={{
                animationEnabled: false,
            }} />
            <Stack.Screen name="Bölge" component={Regions} options={{
                animationEnabled: false,
            }} />
            <Stack.Screen name="Web" component={OtelScanner} options={{
                animationEnabled: false,
            }} />
        </Stack.Navigator>
    );
}

function Routing(props) {
    return (
        <React.Fragment>
            <IconRegistry icons={EvaIconsPack} />
            <ApplicationProvider mapping={mapping} theme={lightTheme}>
                <NavigationContainer>
                    <Drawer.Navigator>
                        <Drawer.Screen name="Login" component={LoginScreen} />
                        <Drawer.Screen name="Menu" component={Menu} />
                    </Drawer.Navigator>
                </NavigationContainer>
            </ApplicationProvider>
        </React.Fragment >
    );
}

标签： javascriptreact-nativereact-navigation

解决方案

在里面<NavigationContainer />你应该有一个<StackNavigator />而不是<DrawerNavigator />

例子： NavigationContainer

<NavigationContainer>
    <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Menu" component={Menu} />
    </Stack.Navigator>
</NavigationContainer>

例子：Menu

function Menu() {
    return (
       <Drawer.Navigator headerMode="none" lazy={false}>
            <Drawer.Screen name="Home" component={HomeScreen} />
            <Drawer.Screen name="Login" component={LoginScreen} />
            <Drawer.Screen name="Verify" component={VerifyScreen} />
            <Drawer.Screen name="Tarih" component={Datepicker} options={{
                animationEnabled: false,
            }} />
            <Drawer.Screen name="Otel" component={SearchedHotel} options={{
                animationEnabled: false,
            }} />
            <Drawer.Screen name="Bölge" component={Regions} options={{
                animationEnabled: false,
            }} />
            <Drawer.Screen name="Web" component={OtelScanner} options={{
                animationEnabled: false,
            }} />
        </Drawer.Navigator>
    );
}

推荐阅读