Question

我将堆栈导航器保存在抽屉导航器中。我有两个问题。首先，打开应用程序时，菜单不应出现在页面上。我在注册过程中使用的组件名称不应出现在以后的页面上。我无法解决这个问题。你能帮我吗？

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 >
    );
}

Answer 1

在<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>
    );
}

反应本地嵌套导航问题

1 个答案: