React Navigation:如何在所有屏幕中显示导航抽屉?
React Navigation: How to Display Navigation Drawer in all screens?
我有一个 Navigation Drawer
,它应该出现在我的所有屏幕中(Splash
屏幕除外)。
我已经知道了:
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="EstateDetails" component={Screens.EstateDetails} />
<Stack.Screen name="Tour" component={Screens.Tour} />
<Stack.Screen name="Comparison" component={Screens.Comparison} />
<Stack.Screen name="Blog" component={Screens.Blog} />
<Stack.Screen name="Auth" component={Screens.Auth} />
</Stack.Navigator>
);
};
const DrawerNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="HomeScreen" component={Screens.Home} />
<Drawer.Screen name="stack" component={StackNavigator} />
<Drawer.Screen name="RegisterEstate" component={Screens.RegisterEstate} />
<Drawer.Screen name="Filter" component={Screens.Filter} />
<Drawer.Screen name="Conditions" component={Screens.Conditions} />
<Drawer.Screen name="Judicial" component={Screens.Judicial} />
<Drawer.Screen name="ContactUs" component={Screens.ContactUs} />
<Drawer.Screen name="ReportBugs" component={Screens.ReportBugs} />
</Drawer.Navigator>
)
};
export const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Screens.Splash}/>
<Stack.Screen name="Home" component={DrawerNavigator}/>
</Stack.Navigator>
</NavigationContainer>
);
};
在这种情况下,所有好的只有堆栈屏幕充当抽屉屏幕。
(屏幕只加载一次,下次显示初始加载,就像博客屏幕一样)。
我需要将光标放在除启动画面之外的所有页面上,并堆叠我的一些页面(例如内容不同的动态页面)
如果您想在所有其他屏幕中显示相同的抽屉,只需将 {DrawerNavigator} 传递给您想要在您的示例中显示 Drawer.So 的所有其他屏幕,如果您想在 Tour 和 Blog 屏幕中显示抽屉只需添加
<Stack.Screen name="Blog " component={DrawerNavigator} />
<Stack.Screen name="Tour" component={DrawerNavigator} />
现在您可以在博客和旅游屏幕中访问。
如果您想在其他屏幕中显示不同的抽屉,请创建一个新功能。
我有一个 Navigation Drawer
,它应该出现在我的所有屏幕中(Splash
屏幕除外)。
我已经知道了:
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="EstateDetails" component={Screens.EstateDetails} />
<Stack.Screen name="Tour" component={Screens.Tour} />
<Stack.Screen name="Comparison" component={Screens.Comparison} />
<Stack.Screen name="Blog" component={Screens.Blog} />
<Stack.Screen name="Auth" component={Screens.Auth} />
</Stack.Navigator>
);
};
const DrawerNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="HomeScreen" component={Screens.Home} />
<Drawer.Screen name="stack" component={StackNavigator} />
<Drawer.Screen name="RegisterEstate" component={Screens.RegisterEstate} />
<Drawer.Screen name="Filter" component={Screens.Filter} />
<Drawer.Screen name="Conditions" component={Screens.Conditions} />
<Drawer.Screen name="Judicial" component={Screens.Judicial} />
<Drawer.Screen name="ContactUs" component={Screens.ContactUs} />
<Drawer.Screen name="ReportBugs" component={Screens.ReportBugs} />
</Drawer.Navigator>
)
};
export const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Screens.Splash}/>
<Stack.Screen name="Home" component={DrawerNavigator}/>
</Stack.Navigator>
</NavigationContainer>
);
};
在这种情况下,所有好的只有堆栈屏幕充当抽屉屏幕。 (屏幕只加载一次,下次显示初始加载,就像博客屏幕一样)。
我需要将光标放在除启动画面之外的所有页面上,并堆叠我的一些页面(例如内容不同的动态页面)
如果您想在所有其他屏幕中显示相同的抽屉,只需将 {DrawerNavigator} 传递给您想要在您的示例中显示 Drawer.So 的所有其他屏幕,如果您想在 Tour 和 Blog 屏幕中显示抽屉只需添加
<Stack.Screen name="Blog " component={DrawerNavigator} />
<Stack.Screen name="Tour" component={DrawerNavigator} />
现在您可以在博客和旅游屏幕中访问。
如果您想在其他屏幕中显示不同的抽屉,请创建一个新功能。