如何解决React Native Navigation V5 Stack、BottomTab 和 Drawer Navigation
我在我的项目中使用了底部、堆栈和抽屉导航。
我需要导航到事件页面而不添加到底部导航器。
我的问题：
如果我需要将一个组件导航到另一个组件而不将组件添加到底部导航器，这里给出了两个文件的代码 如果需要导航到事件页面，如果我在 Component 我可以导航到 Events Compnents。但它也在底部选项卡导航器中显示我不希望底部导航器中的这个组件。
App.js
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet,Text,View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {DrawerContent} from './Screens/DrawerContent';
import {Events} from './Screens/Events'
import MainTabScreen from './Screens/Bottomtab'
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
<Drawer.Screen name="Home" component={MainTabScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',},});```
BottomTab Screen.js
enter code here
```
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Icon from "react-native-vector-icons/Ionicons";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import Home from "./HomeScreen";
import About from "./AboutUs";
import Contact from "./ContactUs";
import Test from "./Test";
import Events from "./Events";
const HomeStack = createStackNavigator();
const AboutStack = createStackNavigator();
const ContactStack = createStackNavigator();
const TestStack = createStackNavigator();
const EventsStack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const MainTabScreen = () => (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
// style={{ backgroundColor: 'tomato' }}
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
options={{
tabBarLabel: "Home",tabBarColor: "#009387",tabBarIcon: ({ color }) => (
<Icon name="ios-home" color={color} size={26} />
),}}
/>
<Tab.Screen
name="ContactUs"
component={ContactStackScreen}
options={{
tabBarLabel: "Notifications",tabBarColor: "#1f65ff",tabBarIcon: ({ color }) => (
<Icon name="ios-notifications" color={color} size={26} />
),}}
/>
<Tab.Screen
name="About"
component={AboutStackScreen}
options={{
tabBarLabel: "Profile",tabBarColor: "#694fad",tabBarIcon: ({ color }) => (
<Icon name="ios-person" color={color} size={26} />
),}}
/>
<Tab.Screen
name="Test"
component={TestStackScreen}
options={{
tabBarLabel: "Search",tabBarColor: "#d02860",tabBarIcon: ({ color }) => (
<Icon name="ios-aperture" color={color} size={26} />
),}}
/>
{/* <Tab.Screen
name="Events"
component={EventsStackScreen}
options={{
tabBarLabel: "Search",}}
/> */}
</Tab.Navigator>
);
export default MainTabScreen;
const HomeStackScreen = ({ navigation }) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#009387",headerTintColor: "#fff",headerTitleStyle: {
fontWeight: "bold",}}
>
<HomeStack.Screen
name="Home"
component={Home}
options={{
title: "Home",headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#009387"
onPress={() => navigation.openDrawer()}
></Icon.Button>
),}}
/>
</HomeStack.Navigator>
);
const ContactStackScreen = ({ navigation }) => (
<ContactStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#1f65ff",}}
>
<ContactStack.Screen
name="ContactUs"
component={Contact}
options={{
title: "ContactUs",headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#1f65ff"
onPress={() => navigation.openDrawer()}
></Icon.Button>
),}}
/>
</ContactStack.Navigator>
);
const AboutStackScreen = ({ navigation }) => (
<AboutStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#694fad",}}
>
<AboutStack.Screen
name="About"
component={About}
options={{
title: "AboutUs",headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#694fad"
onPress={() => navigation.openDrawer()}
></Icon.Button>
),}}
/>
</AboutStack.Navigator>
);
const TestStackScreen = ({ navigation }) => (
<TestStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#d02860",}}
>
<TestStack.Screen
name="Test"
component={Test}
options={{
title: "Test",headerLeft: () => (
<Icon.Button
name="ios-menu"
size={25}
backgroundColor="#d02860"
onPress={() => navigation.openDrawer()}
></Icon.Button>
),}}
/>
</TestStack.Navigator>
);
const EventsStackScreen = ({ navigation }) => (
<EventsStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: "#d02860",}}
>
<EventsStack.Screen
name="Events"
component={Events}
options={{
title: "Events",}}
/>
</EventsStack.Navigator>
);
这里给出了两个文件的代码如果需要导航到事件页面，如果我在
我需要调用 EventsStackScreen 而不添加到
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。